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'
});
效果:
参考
/qq_35393869/article/details/90780471
/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 ] } 终于成功解决!