uniapp,vue 修改v-html中的样式

最近使用Quill富文本编辑器,发现富文本中的图片太宽导致,在移动端超出屏幕

<view v-html="detail" class="detail-box"></view>

解决办法:

  1. 通过 >>> 穿透修改
<style scoped>
	.detail-box  >>>  img{
		width: 100%;
	}
<style>

2:通过正则来修改

this.detail = this.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');

 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过自定义组件的方式来实现一个带有v-model的提示框,具体实现步骤如下: 1. 创建一个自定义组件,例如名为`my-popup`的组件,在组件的template定义提示框的样式和内容,同时使用`v-show`指令来控制提示框的显示和隐藏状态。 ```html <template> <div class="popup-wrapper" v-show="visible"> <div class="popup-content"> <div class="popup-header">{{ title }}</div> <div class="popup-body">{{ message }}</div> <div class="popup-footer"> <button @click="cancel">取消</button> <button @click="confirm">确定</button> </div> </div> </div> </template> <script> export default { props: { title: { type: String, default: "提示" }, message: { type: String, default: "" }, value: { type: Boolean, default: false } }, data() { return { visible: this.value }; }, watch: { value(newValue) { this.visible = newValue; }, visible(newValue) { this.$emit("input", newValue); } }, methods: { cancel() { this.visible = false; }, confirm() { this.visible = false; // 点击确定后的逻辑处理 } } }; </script> ``` 在上述代码,`visible`表示提示框的显示和隐藏状态,初始值为`props`的`value`属性。在`watch`监听`props`的`value`属性和`visible`属性的变化,并通过`$emit`方法向父组件发送`input`事件来更新`v-model`的值。 2. 在使用该组件的页面引入`my-popup`组件,并使用`v-model`来绑定提示框的显示和隐藏状态。 ```html <template> <div class="page"> <my-popup v-model="showPopup" :title="title" :message="message"></my-popup> </div> </template> <script> import MyPopup from "@/components/MyPopup.vue"; export default { components: { MyPopup }, data() { return { showPopup: false, title: "提示", message: "确定要删除吗?" }; } }; </script> ``` 在上述代码,`showPopup`绑定了`my-popup`组件的`v-model`,通过修改`showPopup`的值来控制提示框的显示和隐藏状态。同时,通过`props`向`my-popup`组件传递提示框的标题和内容。在点击取消或确定按钮时,可以通过调用`cancel`或`confirm`方法来修改`visible`的值,从而控制提示框的隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值