vue
小小的产品经理
你回家了?我在等你呢
展开
-
VUE3.0使用组合api进行路由跳转
1)template模板内容,给button按钮绑定一个click<el-button class="btn—confirm" type="primary" @click="handleSearch()"> 登录</el-button>2)在此组件的script中引入userouterimport { useRouter } from "vue-router";3)定义userouter为routerconst router = useRouter();4)ha原创 2021-06-11 11:09:24 · 2008 阅读 · 1 评论 -
uniapp:处理scroll-view的y轴只占用部分而不是全屏
目标:使此处的滑动轴只占用下部分;处理方法:使用calc计算减去头部分长度.recommond_view { height: calc(100vh - 36px);}原创 2021-04-23 12:25:44 · 546 阅读 · 0 评论 -
Vue:使用TreeTable进行多级扩展表格的创建
目标及数据准备数据类型如下,数据中拥有多层子集的children;目标样式:Vue引入TreeTable1)npm安装npm i vue-table-with-tree-grid -S2)声明引入main.jsimport TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table', TreeTable)使用:data=“cateLists” 是需要渲染的数据,:columns="columns"是原创 2021-04-22 18:44:49 · 1045 阅读 · 0 评论 -
Vue:循环数据上下及其中间增加横线(非表格)
目标:如下,要做到对一下权限的上下两行和中间都要增加分割线,显然是所有行增加底部线,并判断当前行是不是第一行,若是第一行增加一个css示例代码如下class均有bdbottom样式,并判断当前行的id是否为0,若为0则增加bdtop的css样式html代码<el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for="(item1,i1) in scope.row.children" :key="item1.id">原创 2021-04-21 21:27:23 · 1592 阅读 · 0 评论 -
Vue+element ui:对表格的某行进行处理(作用域插槽)
目标对element ui中的表格某一行的数据进行修改,如下图,改变状态和点击操作对某一行数据进行操作示例代码//:data="userlist"进行数据的绑定<el-table :data="userlist" border="" stripe> <el-table-column label="#" type="index"></el-table-column> <el-table-column label="姓名" prop="username"&原创 2021-04-21 20:51:41 · 1685 阅读 · 0 评论 -
Vue使用富文本编辑器
安装wangegitor控制台npm i wangeditor --save组件化富文本编辑器1)在components文件夹下创建Wangedit.vue2)目标:2.1)能够输入;2.2)获取到输入后的富文本(为存入数据库作准备);2.3)将字符串化后的富文本能够展示出正确的格式(取数据库的数据)3)html结构<template> <div> //div1用来承载富文本编辑器 <div id = "div1"&g原创 2021-01-23 19:10:11 · 1525 阅读 · 3 评论 -
Vue项目最快最简单打包成桌面应用
打包vue项目为dist文件1)修改基础路径(必做)第一个坑:需要修改静态资源路径为相对路径,找到vue.config.js文件修改publicPath,此处不修改,打包的dist文件的index.html文件将无法加载出来;publicPath: process.env.NODE_ENV === 'production' ? './' : './',2)运行vue ui进行打包控制台vue ui进入vue项目管理界面,进行打包,生成dist文件从官方拉取已经打包好的模版1)创原创 2021-01-22 21:55:07 · 1072 阅读 · 2 评论 -
iview的table合并相同的单元格
效果图代码export default{ data(){ spanb:[] }},mounted:function(){ let contactDotb = 0; let spanb = []; this.data5.forEach((item,index)=>{ if(index === 0){ console.log(spanb) spanb.push(1) }else {原创 2021-01-18 13:01:07 · 899 阅读 · 0 评论 -
uniapp中子组件向父组件传值
整体流程子组件事件去触发全局自定义事件,父组件在全局自定义事件中去获取到值,并将值保存下来进行使用;子组件绑定事件1)各子组件绑定一个事件sendnum,让这个事件去触发一个全局自定义事件lxEvenson.vue<template> <button @onclick = "sendnum"></button></template><script> export default { data(){ return:{原创 2021-01-05 11:25:52 · 2023 阅读 · 0 评论 -
uniapp中父组件向子组件传数据
使用组件时写入数据parent.vue//其中msg="123"就是需要传的数据<template> <div> 我是父组件 <son msg="123"></son> </div></template>子组件接收数据son.vue<script> export default{ props:['msg'] }</script>子组件使用数据//其中msg会被替换成原创 2021-01-04 23:03:24 · 803 阅读 · 1 评论 -
uniapp中组件的创建及引用
按标准创建文件夹及组件1)pages文件夹下创建components2)components下创建组件son.vue(名字可以自取)父组件引入子组件parent.vue<script> import son from '../components/son.vue' export default { components:{ son } }</script>父组件使用自组件parent.vue<template> <di原创 2021-01-04 22:55:40 · 5566 阅读 · 1 评论 -
部署Vue项目
打包Vue文件1)终端打开vue ui(要求vue版本为3.0以上)终端vue ui1)找到要打包的项目进行打包在愿项目下会生成一个dist文件夹代表成功配置生产环境1)新建一个文件夹2)生产初始化配置文件cd到当前文件夹下文件夹npm init -y3)安装express管理工具文件夹npm install express --save4)将第一段中打包好的dist文件复制到当前文件夹下5)新建app.js文件写入以下内容:81为作者定义的打开端口号ap原创 2021-01-04 22:14:02 · 127 阅读 · 1 评论 -
使用v-if/else进行按需渲染
实现目标:当权限等级为0时,显示一级;当权限等级为1时,显示一级;当权限等级为2时,显示一级;代码如下xx.vue<el-table-column label="权限等级" prop="level"> <template slot-scope="scope"> <el-tag type="success" v-if="scope.row.level === '0'">一级</el-tag> <el-tag type="danger原创 2021-01-02 17:54:59 · 148 阅读 · 0 评论 -
Vue中使用router进行页面跳转
本文以推出登录为例,点击“退出登录”按钮,返回到登录页面在路由中增加需要跳转的页面1)在router文件夹下的router.js或者index.js文件中引入组件页面从Login.vue文件中引入Login组件router/index.jsimport Login from '../components/Login.vue'2)写入Login组件的路由router/index.jsVue.use(VueRouter)const routes = [ { path: '/'原创 2021-01-02 12:16:32 · 934 阅读 · 2 评论 -
Vue使用axios进行请求
安装axios1)方案一:使用npm进行安装cnpm install axios --save2)vue3.0以上可以使用vue ui进行依赖安装以项目目录打开终端;vue ui安装axios的依赖全局引入并定义使用axios打开main.js文件1)引入axiosimport axios from 'axios'2)设置baseurlaxios.defaults.baseURL = 'http://rambuild.cn:8888/api/private/v1'3)定原创 2021-01-02 11:53:09 · 382 阅读 · 0 评论 -
uniapp解决跨域请求问题
配置proxy代理在manifest.json中找到源码视图;配置如下:target指向请求的链接的服务器地址"h5": { "devServer": { "disableHostCheck": true, "proxy": { "/api": { "target": "http://157.122.54.189:9088", "changeOrigin": true, "secure": false, "pathRewrite":{原创 2020-12-31 19:22:19 · 2262 阅读 · 1 评论 -
uniapp使用全局颜色
定义全局颜色在uni.scss中写入全局颜色变量其中$color:#2f90b6是作者定义的主题色/* 颜色变量 *///配置了主题色$color: #2F90b9;/* 行为相关颜色 */$uni-color-primary: #007aff;$uni-color-success: #4cd964;$uni-color-warning: #f0ad4e;$uni-color-error: #dd524d;使用主题色使用方法如下,需要带上$符号;<template>原创 2020-12-31 00:17:58 · 4731 阅读 · 0 评论 -
uniapp引入其他页面作为组件
页面格式homo.vue为使用组件的页面,另外四个为组件的页面注册组件<script>import homeAlbum from './home-album.vue';import homeNew from './home-new.vue';import homeRecommond from './home-recommond.vue'import homeCategory from './home-category.vue'export default{ component原创 2020-12-30 23:21:12 · 7247 阅读 · 3 评论 -
uni-app引用线上iconfont
获取到css样式文件1.进入到项目的font class,复制css的链接在浏览器中打开;2.在浏览器中打开的css样式文件如下:3.复制样式文件到项目中进行保存作者新增了iconfont.css文件,将css样式文件复制进来;使用iconfont在文件中使用;<i class="iconfont icon-pinglun"></i>其中icon-pinglun来自于如下;...原创 2020-12-30 22:33:11 · 392 阅读 · 0 评论