随笔分类 -  Vue框架

1 2 下一页
vue+element+Cascader 级联选择器任意一级选项，去掉单选框radio
摘要：<template> <div class="block"> <h1 class="demonstration">选中的值：{{ value }}</h1> <el-cascader :options="options" v-model="value" popper-class="cascaderB 阅读全文
posted @ 2024-10-16 13:57 此夏_唯美 阅读(104) 评论(0) 推荐(0) 编辑
vue+wangEditor编辑器，上传图片请求后台接口
摘要：来吧，先给大家看一下，是否是你想要的简单轻便编辑器的效果。 父组件： <EditorView :content="value" @change="grtUrl"/> <script> import EditorView from "@/components/EditorView"; export d 阅读全文
posted @ 2024-10-15 15:54 此夏_唯美 阅读(114) 评论(0) 推荐(0) 编辑
vue实现自定义字体库
摘要：先看效果是不是你所需要的，再看具体如何实现。 效果如下图所示： 有些字体需要下载，用图片就会变得很不清楚，这样我们就需要去下载字体库，操作步骤如下： 首先找到需要下载的字体库 然后放在项目里面 然后定义字体库名 最后引用字体库名 第一步：通过第一字体库链接下载字体库，https://www.diyi 阅读全文
posted @ 2022-12-08 21:32 此夏_唯美 阅读(1099) 评论(0) 推荐(0) 编辑
Element-ui树形控件el-tree鼠标移入显示隐藏效果超简单
摘要：显示效果： 废话不多说，直接上代码 <template> <el-tree default-expand-all :data="data"> <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;" 阅读全文
posted @ 2021-06-02 15:26 此夏_唯美 阅读(2148) 评论(0) 推荐(0) 编辑
vue表格拖拽使用Sortable插件库
摘要：1 <template > 2 <el-table 3 row-key="name" 4 :data="tableData" 5 stripe style="width:100%;"> 6 <el-table-column prop="name" label="测试"></el-table-colu 阅读全文
posted @ 2020-12-11 16:23 此夏_唯美 阅读(231) 评论(0) 推荐(0) 编辑
Vue+Element+Table表格动态跨列文章
摘要：https://my.oschina.net/u/4772459/blog/4699602 如图所示: 1 <template class="SysRole"> 2 <div> 3 <el-table 4 :data="tableData" 5 :span-method="arraySpanMeth 阅读全文
posted @ 2020-11-02 16:19 此夏_唯美 阅读(1075) 评论(0) 推荐(0) 编辑
vue项目浏览器ioc小图标
摘要：1 先有一个需要图片，png 、jpg ...格式都可以 2 把图片转换成 .con 格式的图标 ，http://www.bitbug.net/使用比特虫转换 ，目标尺寸：16*16 或者 32*32都行 3 转换后的图标命名为 favicon.ico ，放在项目根目录，与 index.html 文 阅读全文
posted @ 2020-09-07 14:00 此夏_唯美 阅读(663) 评论(0) 推荐(0) 编辑
vue搭建项目iview+axios+less
摘要：项目地址：https://github.com/CinderellaStory/vue-iview-project vue搭建项目壳子已安装：iview、axios、less 已有界面：登录、左侧菜单 已有功能：面包屑切换、axios封装等 阅读全文
posted @ 2020-09-05 15:16 此夏_唯美 阅读(297) 评论(0) 推荐(0) 编辑
vue移动端在线签名
摘要：<template> <section class="signature"> <div class="signatureBox"> <div class="canvasBox" ref="canvasHW"> <canvas ref="canvasF" @touchstart='touchStart 阅读全文
posted @ 2020-09-01 18:00 此夏_唯美 阅读(1444) 评论(0) 推荐(0) 编辑
Vue中的input输入框无法输入强制渲染
摘要：刚开始以为是键盘的问题，然后发现别的地方都可以输入，唯独这个input无法输入，可能因为我循环嵌套了三次，太深入无法渲染 后来我发现这个方法可以使用 1 <el-input 2 v-model="desc" 3 type="textarea" 4 @input="change($event)" 5 阅读全文
posted @ 2020-08-17 15:59 此夏_唯美 阅读(3904) 评论(0) 推荐(1) 编辑
vue项目根据不同环境动态配置接口
摘要：首先，在公共请求接口的地方src/api/common.js 1 // 公共配置接口域名接口 2 export function configApi(data) { 3 return request({ 4 url: '配置接口', 5 method: 'post', 6 data 7 }) 8 } 阅读全文
posted @ 2020-05-08 15:13 此夏_唯美 阅读(3099) 评论(0) 推荐(0) 编辑
Vue+WebSocket实现客户端与服务端通讯，前端与机器人对接
摘要：因公司突然要求做个机器人客户端，需要与机器人对接，采用了WebSocket技术实现浏览器与服务端进行联调, 前端以WebSocket协议格式发送数据到后台, 后台解析指令并将指令发送到机器人, 机器人的相关相应信息也通过后台使用WebSocket协议封装数据传输给浏览器 1 created() { 阅读全文
posted @ 2020-04-03 11:12 此夏_唯美 阅读(2185) 评论(1) 推荐(1) 编辑
vue实现点击左侧菜单，右侧显示对应的内容
摘要：顺便为大家推荐好听的歌曲 1 <template> 2 <div class="purchaseAdd"> 3 <div class="container"> 4 <div class="navsBox"> 5 <ul> 6 <li v-for="(item,index) in items" :ke 阅读全文
posted @ 2019-12-30 16:56 此夏_唯美 阅读(11458) 评论(0) 推荐(1) 编辑
vue二次封装Element的table组件
摘要：欢迎扫码加群，一起讨论，共同学习成长！ 效果图： 通过父子组件传值的方式 父组件： <template> <div class='test'> <material :list="list" :columns="columns" :operates="operates"/> </div> </temp 阅读全文
posted @ 2019-11-29 16:33 此夏_唯美 阅读(2547) 评论(0) 推荐(0) 编辑
Vue底部导航栏封装组件
摘要：废话不多说，直接晒代码 阅读全文
posted @ 2019-11-06 17:20 此夏_唯美 阅读(1603) 评论(0) 推荐(0) 编辑
Element-Ui表单移除校验clearValidate和resetFields
摘要：因为我是把添加和修改公用一个弹窗，点击添加弹窗后，如果没移除表单校验的话，再点击修改弹窗时校验就会被记住，所以需要移除校验，但在清空表单校验时会报如下错误： 那么，你只需要加上这段话即可 1 this.$nextTick(()=>{ 2 this.$refs.addArray.resetFields 阅读全文
posted @ 2019-09-20 13:51 此夏_唯美 阅读(9272) 评论(0) 推荐(0) 编辑
Vue组件之间传值（父子）
摘要：父组件代码如下： 子组件传值代码如下： 阅读全文
posted @ 2019-09-16 14:47 此夏_唯美 阅读(271) 评论(0) 推荐(0) 编辑
vue如何把路由拆分多个文件
摘要：若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。 一、建立多个路由文件 二、在主路由文件引入其他子路由文件即可 三、重新运行：npm run dev即可 阅读全文
posted @ 2019-09-12 16:00 此夏_唯美 阅读(1784) 评论(0) 推荐(0) 编辑
Vue项目如何使用公共js方法呢？
摘要：扫码小程序可看实例操作，有啥问题也可扫码加群，很希望可以帮助到你喔！ 一、新建文件夹：commFunction，然后在里面建立一个文件common.js 二、建立好之后，在main.js里面引入这个公共方法 三、还是在页面中调用这个方法 测试一下: 1 export default{ 2 login 阅读全文
posted @ 2019-09-12 15:49 此夏_唯美 阅读(15874) 评论(0) 推荐(0) 编辑
Vant+小程序+购物车实例
摘要：图片实例，看是否是您所需要的喔。。。。 扫码小程序可看实例操作，有啥问题也可扫码加群，很希望可以帮助到你喔！ HTML部分： <view class="cart"> <view class='top' wx:if="{{isTop}}"> <view> <van-icon name="delete" 阅读全文
posted @ 2019-08-11 00:00 此夏_唯美 阅读(5592) 评论(0) 推荐(0) 编辑

1 2 下一页
点击右上角即可分享
微信分享提示