bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm

vue element ui this.$alert 样式修改，长词自动换行、自定义htm

vue element ui this.$alert 样式修改，长词自动换行、自定义html标签无效果

问题1：

vue alert提示框长词无法自动换行(一个连起来的词)

解决： 自定义一个class 名

this.$alert(row.content, row.title, {

confirmButtonText: '确定',

customClass:'message_box_alert'

});

CSS：

/**站内信长单词强制换行 */

.message_box_alert {

word-break: break-all !important;

}

这里要注意下！！！！如果 style 标签后面加了  scoped 会导致样式无效！！！！

问题2： 自定义html标签无效果

解决： dangerouslyUseHTMLString:true,

this.$alert(row.content, row.title, {

confirmButtonText: '确定',

dangerouslyUseHTMLString:true,

customClass:'message_box_alert'

});

效果：

参考

https://blog.csdn.net/qq_35393869/article/details/90780471

https://segmentfault.com/q/1010000014867718

vue element ui this.$alert 样式修改，长词自动换行、自定义htm相关教程

Vue项目中的eslintrc校验格式---使用VSCode的ESLint保存自动修正

Vue项目中的eslintrc校验格式---使用VSCode的ESLint保存自动修正格式 在 扩展(Extensions )里搜索 ESLint 安装 点击Extension Settings eslint.codeAction.showDocumentation: { enable: true }, eslint.enable: true, eslint.autoFixOnSave: true, eslint.ru

vue里filters为什么获取不到this？

vue里filters为什么获取不到this？ div{{auditResult | auditResultNameFilter}}/div data() { return { auditResultOptions: [...] } },filters: { auditResultNameFilter(status) { let [obj] = this.auditResultOptions.filter(item = item.value === stat

Vue3.x-bate + Antd2.x 项目搭建报错

Vue3.x-bate + Antd2.x 项目搭建报错 Failed to compile. ./node_modules/ant-design-vue/es/date-picker/style/index.less (./node_modules/css-loader/dist/cjs.jsref–10-oneOf-3-1!./node_modules/postcss-loader/srcref–10-oneOf-3-2!./node_modules/le

vue3新增Teleport组件

vue3新增Teleport组件 在开始介绍 Teleport 之前先了解一下 React 的 Portals 特性。 Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。 ReactDOM.createPortal(child, container) 第一个参数(child)是任何可渲染的 React 子元素

vue day02 笔记(回顾+json-server用法)

vue day02 笔记(回顾+json-server用法) 文章目录 1 回顾(day01) 背景 关于vue基础 明确下列: vue的基本指令 (1) 基本框架 (2) 渲染指令 (3) v-vloak 指令 (4) v-bind 指令和class style绑定 (5) v-on指令以及几个常见 (6) 数据绑定(单,双) (7) v-for 指令 (8)

v-bind动态绑定(vue)

v-bind动态绑定(vue) v-bind分为两种(对对象和对数组) 首先介绍下v-bind对象语法 !DOCTYPE htmlhtml lang=cnhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title/headstyle .active{ color:

vue之computed计算属性的复杂操作

vue之computed计算属性的复杂操作 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleTitle/title/headbody div id=app h2总价格：{{totalPrice}}/h2 /div script src=../js/vue.js/script script const app = new Vue({ el: '#app', data: { books: [

Webpack打包Vue组件中的css

Webpack打包Vue组件中的css 太痛苦了，一直报错 百度了很多，安装了好多个包，最后找到最靠谱的解决方法，配置use { test:/\.css$/, use:[ vue-style-loader, css-loader ] } 终于成功解决！