网页制作神器 |
您所在的位置：网站首页 › 网页制作入门软件下载 › 网页制作神器 |
网页制作神器
|
目录 一、前置准备 ⚓ 二、引入ElementUI 📄 三、使用ElementUI ⚙️ 四、总结element组件（可复制直接使用）🌈 下拉选择框 🐔 文件、图片上传展示 🌟 日期时间 🔥 单选 🎯 表单校验 🍉 只能输入整数 🍓 审核 🎁 表格显示高亮信息 🌅 表格里显示图片 🌐 表格里显示视频 🍃 评分 ⚽ 树形下拉菜单 🍊 Switch切换按钮 📢 轮播图 🐾 时间线 🥫 下拉多选 ✉️ 创建属性 tags 🎁 在编辑的时候 注意把保存的JSON字符串转成JSON数组 🌸 在保存的时候把JSON数组转成JSON字符串存到数据库 🍘 富文本 🎹 一、前置准备 ⚓1、安装相关环境，使用VsCode或者webstrom初始化Vue 项目 软件环境下载地址：软件 - 坚果云 - |同步|备份|无限空间 vue-cli安装： npm install -g @vue/clinpm设置淘宝镜像加速： npm config set registry https://registry.npm.taobao.org创建vue项目： vue create vue
当然，如果不使用yarn 就选npm vue create vue--packageManager npm 这将告诉 Vue CLI 在初始化项目时使用 npm 作为软件包管理器。这样，你就不需要后续手动更改依赖管理器了。(请注意，这个标志只在 Vue CLI 版本 4.5.0 或更高版本上可用。如果你的 Vue CLI 版本较旧，请先升级到最新版本) 运行vue项目： cd vue npm run serve
Vue项目的初始化文件结构通常如下所示：
App.vue是根组件，是项目的入口组件，可以在其中定义整个应用的布局和结构。main.js是项目的主入口文件，在这里创建Vue实例，并进行其他的配置和初始化操作。 public目录用于存放不需要经过打包处理的静态资源。 其中vue.config.js是Vue项目的配置文件，可以对构建过程进行自定义配置，如更改输出路径、配置代理、压缩等。如将初始项目端口号修改为 7000。
可以发现现在修改了title的名字，如果不加这段代码，默认展示的就是新建项目时起的名子。 2、安装组件 | Element
3、修改初始化文件
HomeView.vue 删除之后为： 主页 export default { name: 'HomeView', }
App.vue 修改删除内容之后为： 增加全局样式 global.css： *{ box-sizing:border-box; } body { color: #333; font-size: 14px; /* 外和内边框都为0 */ margin: 0; padding:0; }
router.js删除后为： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: () => import('../views/HomeView.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router至此，项目初始化完成！ 安装成功后，即可引入
在 main.js 中 import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI, { size: "small" }); new Vue({ router, render: h => h(App) }).$mount('#app') 三、使用ElementUI ⚙️Element - The world's most popular Vue UI framework 学习两种布局
在 HomeView.vue 文件中 主页 export default { name: 'HomeView', }
商品 1
价格 $99.00
商品 2
价格 $99.00
商品 3
价格 $99.00
商品 4
价格 $99.00
export default {
name: 'HomeView',
}
再学习第二种方式，使用Container 布局容器，创建一个导航栏
：外层容器。管理定义内容的子元素 :default-openeds 设置el-menu列表默认打开。 ：定义一个可点击的点击菜单。 ：el-menu的子元素用来定义el-menu点击列表的列表名字。 ：按钮元素，菜单列表的单位元素。 ：el-men-item的分组元素。 Aside Header Main Footer
这段代码的层次结构如下： App (根组件) el-container (容器组件，设置高度和边框样式) el-aside (侧边栏组件，设置宽度和背景颜色) el-menu (菜单组件，设置默认展开项) el-submenu (子菜单组件) el-menu-item (菜单项组件)el-menu-item (菜单项组件)el-submenu (子菜单组件) el-menu-item (菜单项组件)el-submenu (子菜单组件) el-menu-item (菜单项组件)el-submenu (子菜单组件) el-menu-item-group (菜单项分组组件) el-menu-item (菜单项组件)el-menu-item (菜单项组件)el-menu-item-group (菜单项分组组件) el-menu-item (菜单项组件)el-submenu (子菜单组件) el-menu-item (菜单项组件)el-container (容器组件) el-header (头部组件，右对齐) el-dropdown (下拉菜单组件) i (图标)el-dropdown-menu (下拉菜单项组件) el-dropdown-item (下拉菜单项组件)el-dropdown-item (下拉菜单项组件)el-dropdown-item (下拉菜单项组件)span (文本)el-main (内容主体组件) el-table (表格组件) el-table-column (表格列组件)el-table-column (表格列组件)el-table-column (表格列组件)
：外层容器。管理定义内容的子元素 :default-openeds 设置el-menu列表默认打开。 ：定义一个可点击的点击菜单。 ：el-menu的子元素用来定义el-menu点击列表的列表名字。 ：按钮元素，菜单列表的单位元素。 ：el-men-item的分组元素。 四、总结element组件（可复制直接使用）🌈 下拉选择框 🐔 data() { return { list: [], } } this.$request.get('/xxx/selectAll', { params: { } }).then(res => { this.list = res.data }) 文件、图片上传展示 🌟 上传 handleImgSuccess(response, file, fileList) { this.form.img = response.data }, // 表格显示 图片 // 表格显示 下载 下载 日期时间 🔥 单选 🎯 表单校验 🍉 rules: { username: [ { required: true, message: '请输入账号', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], confirmPass: [ { validator: validateConfirmPass, trigger: 'blur' } ] } let validateConfirmPass = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.form.password) { callback(new Error('两次输入密码不一致!')); } else { callback(); } } 只能输入整数 🍓 num: [ { required: true, message: '请输入整数', trigger: 'blur' }, { pattern: /^[1-9]\d*$/, message: '只能输入正整数',} ] 审核 🎁 通过 拒绝 changeStatus(row, status) { this.form = JSON.parse(JSON.stringify(row)) this.form.status = status this.$confirm('您确定'+status+'吗？', '确认审核', {type: "warning"}).then(response => { this.$request.put('/xxx/update', this.form).then(res => { if (res.code === '200') { this.$message.success('审核成功') this.load(1) } else { this.$message.error(res.msg) // 弹出错误的信息 } }) }).catch(e => {}) }, 表格显示高亮信息 🌅 待审核 通过 拒绝 表格里显示图片 🌐 表格里显示视频 🍃 评分 ⚽ data() { return { star: 5 } } 树形下拉菜单 🍊
{{ item.content }} 下拉多选 ✉️ 创建属性 tags 🎁 tags: [] 在编辑的时候 注意把保存的JSON字符串转成JSON数组 🌸 this.tags = JSON.parse(this.form.tags || '[]') 在保存的时候把JSON数组转成JSON字符串存到数据库 🍘 this.form.tags = JSON.stringify(this.tags) // 把数组转成JSON字符串存储 富文本 🎹安装： npm i wangeditor --save页面导入 : import E from "wangeditor" setRichText(html) { this.$nextTick(() => { this.editor = new E(`#editor`) this.editor.config.uploadImgServer = this.$baseUrl + '/files/editor/upload' this.editor.config.uploadFileName = 'file' this.editor.config.uploadImgHeaders = { token: this.user.token } this.editor.config.uploadImgParams = { type: 'img', } this.editor.config.zIndex = 0 this.editor.create() // 创建 this.editor.txt.html(html) }) },新增和编辑设置富文本 handleAdd() { // 新增数据 this.form = {} // 新增数据的时候清空数据 this.fromVisible = true // 打开弹窗 this.setRichText('') }, handleEdit(row) { // 编辑数据 this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据 this.fromVisible = true // 打开弹窗 this.setRichText(this.form.content) }, /** * 富文本文件上传 */ @PostMapping("/editor/upload") public Dict editorUpload(MultipartFile file) { String flag; synchronized (FileController.class) { flag = System.currentTimeMillis() + ""; ThreadUtil.sleep(1L); } String fileName = file.getOriginalFilename(); try { if (!FileUtil.isDirectory(filePath)) { FileUtil.mkdir(filePath); } // 文件存储形式：时间戳-文件名 FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName); // ***/manager/files/1697438073596-avatar.png System.out.println(fileName + "--上传成功"); } catch (Exception e) { System.err.println(fileName + "--文件上传失败"); } String http = "http://" + ip + ":" + port + "/files/"; return Dict.create().set("errno", 0).set("data", CollUtil.newArrayList(Dict.create().set("url", http + flag + "-" + fileName))); }注意：在save的时候设置变量值 this.form.content = this.editor.txt.html()
预览 关 闭变量 editor: null, content: '', fromVisible1: false,表格 查看内容函数 preview(content) { this.content = content this.fromVisible1 = true },表单 |
【本文地址】
今日新闻 |
推荐新闻 |