Vue实现副本编辑器

入口文件：
main.js

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme// 将富文本编辑器，注册为全局可用的组件
Vue.use(VueQuillEditor)

<!-- 富文本编辑器组件 --><quill-editor v-model="addForm.goods_introduce"></quill-editor><!-- 添加商品的按钮 --><el-button type="primary" class="btnAdd" @click="add">添加商品</el-button

data:

addForm: {goods_name: '',goods_price: 0,goods_weight: 0,goods_number: 0,goods_cat: [],// 图片的数组pics: [],// 商品的详情描述goods_introduce: '',// 商品的参数（数组），包含 `动态参数` 和 `静态属性`attrs: [],
},

// 添加商品add() {this.$refs.addFormRef.validate(async (valid) => {if (!valid) {return this.$message.error('请填写必要的表单项！')}// 执行添加的业务逻辑// 将this.addForm.goods_cat改为字符串类型// lodash深拷贝 cloneDeep(obj)const form = _.cloneDeep(this.addForm)form.goods_cat = form.goods_cat.join(',')// 处理动态参数this.manyTabData.forEach((item) => {const newInfo = {attr_id: item.attr_id,attr_value: item.attr_vals.join(' '),}this.addForm.attrs.push(newInfo)})// 处理静态属性this.onlyTableData.forEach((item) => {const newInfo = { attr_id: item.attr_id, attr_value: item.attr_vals }this.addForm.attrs.push(newInfo)})form.attrs = this.addForm.attrsconsole.log(form)// 发起请求 - 添加商品// 商品的名称，必须是唯一的const { data: res } = await this.$http.post(`goods`, form)if (res.meta.status !== 201) {return this.$message.error('添加商品失败！')}this.$message.success('添加商品成功！')this.$router.push(`/goods`)})},

css:

.btnAdd {margin-top: 15px;
}

Vue实现副本编辑器相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Vue引入 mavon-editor 编辑器的详细步骤
Vue引入 mavon-editor 编辑器的详细步骤一.编辑器的引入如果你的项目之前没有安装过该编辑器,那就得先安装编辑器在自己的项目的根目录执行下列命令: npm install mavon ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
vue中使用图像编辑器tui-image-editor(一)
vue中使用图像编辑器tui-image-editor(一) 场景:需要对图片进行旋转.缩放.裁剪.涂鸦.标注.添加文本等. 效果-图1 1.基本介绍官网:https://ui.toast.com/ ...
vue中使用图像编辑器tui-image-editor(二)——应用示例
vue中使用图像编辑器tui-image-editor(二)--应用示例效果代码 mark.vue <template><div class="drawing-cont ...
Vue中富文本编辑器的使用
基于 Vue 的富文本编辑器有很多,例如官方就收录推荐了一些: https://github.com/vuejs/awesome-vue#rich-text-editing . 这里我们以 eleme ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...

Vue实现副本编辑器

Vue实现副本编辑器相关推荐

最新文章

热门文章