小编htm*_*tmn的帖子

Ionic 4、Ionicon 库添加自定义图标

我目前正在使用 Vue Cli 生成一个包含 ionic 和 ionicon 库的项目。

包.json

  "@ionic/core": "^4.11.7",
  "@ionic/pwa-elements": "^1.4.1",
  "@ionic/vue": "0.0.9",
  "ionicons": "^4.6.3",
Run Code Online (Sandbox Code Playgroud)

我正在尝试向我的项目添加自定义图标。我正在关注 Ionic 文档https://ionicons.com/usage,其中指出为了添加自定义 SVG 图标,必须采取以下步骤:

要使用自定义 SVG,请在 src 属性中提供其 URL 以请求外部 SVG 文件。src 属性的工作原理与 URL 必须可从发出图像请求的网页访问相同。此外,外部文件只能是有效的 SVG,并且不允许在 SVG 元素中包含脚本或事件。

我已按照示例进行操作,但未加载图标。我发现的相同案例场景的另一个示例是以下https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html。按照这个示例,我尝试直接在 src 中添加图标的 SVG 代码。这似乎有效,但出于组织目的,如果我可以将文件路径传递给组件,我会发现它更方便。

ionic-framework vue.js ionic4

5
推荐指数
1
解决办法
2940
查看次数

如何在 ionic 4 中移动搜索栏右侧搜索栏的搜索图标

我正在使用ionic-4. 我有简单的搜索页面,我想将搜索图标移动到组件的右侧ion-searchbar。我尝试过使用不同的CSS规则,但没有找到任何解决方案。

我的离子搜索栏代码如下:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-searchbar showCancelButton="never"></ion-searchbar>
  </ion-toolbar>
</ion-header>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

javascript searchbar typescript angular ionic4

4
推荐指数
1
解决办法
9078
查看次数

v-select vuetify 最大元素数

v-select尽管数组 (persons) 有 22 个元素,但似乎只显示了数组中的 20 个元素,但是如果我使用自动完成功能,我可以在列表中看到这 2 个缺少的人,因此在我开始寻找使用自动完成功能之前,它们实际上不会显示. 代码如下:

<v-select
  :items="persons"
  v-model="model.persons"
  label="Persons:"
  item-text="name"
  item-value="id"
  multiple
  chips
  max-height="auto"
  autocomplete
>
  <template slot="selection" slot-scope="data">
    <v-chip
      :selected="data.selected"
      :key="JSON.stringify(data.item)"
      close
      class="chip--select-multi"
      @input="data.parent.selectItem(data.item)"
    >
       {{ data.item.name }}
    </v-chip>
  </template>
  <template slot="item" slot-scope="data">
    <template v-if="typeof data.item !== 'object'">
      <v-list-tile-content v-text="data.item"></v-list-tile-content>
    </template>
    <template v-else>                       
      <v-list-tile-content>
        <v-list-tile-title v-html="data.item.name"></v-list-tile-title>
      </v-list-tile-content>
    </template>
  </template>
</v-select>
Run Code Online (Sandbox Code Playgroud)

是否有任何v-select选项可用于增加该数字?

vue.js vuetify.js v-select

2
推荐指数
1
解决办法
2561
查看次数

AWS Amplify JavaScript Gitpod 自动设置

我正在尝试使用 Gitpod 设置 AWS Amplify JavaScript 项目,以便在启动新工作区时无需手动执行这些步骤amplify-cli(添加 IAM 用户、生成aws-exports.js文件等)。

到目前为止,我已成功在计算机上安装了和(我将aws-cli其添加到任务初始化时的文件中)amplify-cli.gitpod.yml

$ npm install @aws-amplify/cli
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
Run Code Online (Sandbox Code Playgroud)

所以我可以添加

$ export AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
$ export AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
$ export AWS_DEFAULT_REGION=us-west-2
Run Code Online (Sandbox Code Playgroud)

环境变量到gitpod 变量,但是例如在运行时,amplify pull我看不到 [default] 用户,就像使用本地设置运行它时通常看到的那样。

javascript vue.js aws-amplify gitpod

2
推荐指数
1
解决办法
431
查看次数

wrap-word 不适用于 v-list-item-title/subtitle

我正在使用 Vuetifyv-list组件。我有更长的文本要显示在v-list-item-subtitle组件中。此文本不完全可见:

在此处输入图片说明

为了避免这个问题,我成功地使用了我在类似情况下使用的内容:我选择应用一个 CSS 属性word-wrap设置为的类break-word

.wrap-text {
  word-wrap: break-word;
}
Run Code Online (Sandbox Code Playgroud)

用这种方式:

<v-list-item-subtitle v-html="item.subtitle" class="wrap-text"></v-list-item-subtitle>
Run Code Online (Sandbox Code Playgroud)

这不能解决问题。当我使用v-list-item-title.

代码笔

javascript css vue.js vuetify.js

1
推荐指数
2
解决办法
4392
查看次数