通过接口获取的数据是富文本,其中带有图片,怎么改变图片的大小?

这一段是通过接口获取的富文本,通过在标签中写入‘v-html’渲染到了页面上,但是图片大小溢出了屏幕。

想改变图片大小,可通过 ‘>>>’ 属性穿透 。

如果是用的是css原生样式,可通过‘>>>’解决。

.htmlContent>>>img {
  // padding: 15px;
  // /deep/ img {
    width: 100%;
  // }
}

如果是scss 预处理器,因为‘>>>’无法编译,可使用::v-deep代替

.htmlContent {
  ::v-deep img {
    width: 100%;
  }
}

/deep/会报错 不晓得为什么

.htmlContent {
  /deep/ img {
    width: 100%;
  }
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你是通过接口懒加载的方式获取数据,那么你可以通过监听搜索框的输入事件,在输入时触发接口请求,获取符合条件的数据。 首先,你需要在组件中定义一个data属性,用于存储搜索框中的文本输入值和搜索结果。然后,你可以监听搜索框的输入事件,在事件处理函数中调用接口请求函数,将输入值作为参数传递给接口获取符合条件的数据,并将结果保存到data属性中。 下面是一个示例代码: ``` <template> <a-cascader v-model="selectedOptions" :options="options" :show-search="true" :filter="false" :placeholder="'请选择'" @input="handleSearch" /> </template> <script> import { Cascader as ACascader } from 'ant-design-vue' import { getOptions } from '@/api/options' export default { components: { ACascader, }, data() { return { selectedOptions: [], options: [], searchText: '', searchResult: [], } }, methods: { async handleSearch(value) { this.searchText = value if (value) { const result = await getOptions(value) this.searchResult = result this.options = this.searchResult } else { this.options = [] } }, }, } </script> ``` 在这个示例中,我们定义了一个searchText属性,用于存储搜索框中的文本输入值,以及一个searchResult属性,用于存储符合条件的搜索结果。我们监听了搜索框的输入事件,并在事件处理函数中调用了接口请求函数getOptions,将输入值作为参数传递给接口获取符合条件的数据。如果输入值为空,则将options属性设置为空数组,否则将options属性设置为搜索结果。在模板中,我们使用v-model指令将选中的选项绑定到selectedOptions属性上。 当然,这只是一个简单的示例,你需要根据你的实际情况进行适当的修改,例如添加loading状态、分页等等功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值