JavaScript
文章平均质量分 62
Sunshinedada
这个作者很懒,什么都没留下…
展开
-
vue中computed以及getter和setter
vue中computed以及getter和setterVue 中,computed 的属性可以被视为是 data 一样,可以读取和设值。因此在 computed 中可以分成 getter(读取) 和 setter(设值),一般情况下是没有 setter 的,computed 预设只有 getter ,也就是只能读取,不能改变设值。vue.js计算属性默认只有 getter,因为是默认值所以我们也常常省略不写,如下代码:<div id="demo">{{ fullName }}</原创 2020-12-02 11:17:41 · 2865 阅读 · 0 评论 -
vue图片裁剪vue-cropper
vue图片裁剪-- vue-croppervue-cropper 官网:https://github.com/xyxiao001/vue-cropper1.安装2.引入3.使用vue-cropper 官网:https://github.com/xyxiao001/vue-cropper1.安装npm install vue-cropper2.引入在main.js里面中:import VueCropper from 'vue-cropper'Vue.use(VueCropper)3.使原创 2020-12-01 18:17:57 · 864 阅读 · 0 评论 -
tab切换搜索
tab切换搜索当tab切换变成一个搜索条件的时候,tab为全部的时候,所有状态的数据都有,当为待处理时,下面只有发货的数据,当为待送达时,下面只有待确认送达的数据:html:要把三个tab写到前面,然后所有的内容写到他们下面 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="全部" name="first"></el-tab-pane>原创 2020-12-01 17:32:25 · 800 阅读 · 0 评论 -
vue上移/下移
vue上移/下移<el-row class="views_box" :gutter="24"> <el-row class="box_coupon" :gutter="24"> <el-col class="coupon_list" v-for="(item, index) in exchangeList" :key="index" > <el-col :span="12" clas原创 2020-12-01 17:06:00 · 1742 阅读 · 0 评论 -
vue开启/停止按钮切换
vue开启/停止按钮切换 <el-table :data="tableData" ref="tableDatas" class="view_table" style="width: 100%" id="tableExcel" v-loading="loading" @row-click="rowClick" > <el-table-column prop="addTim原创 2020-12-01 16:36:26 · 2392 阅读 · 1 评论 -
vue页面展示保留原有格式
vue页面展示保留原有格式这里从后端获取页面内容,如果后端返回的有格式适用,否则需要用到富文本:https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/rich-editor.html方法就是:<div class="tastrule_center" v-html="integralRule"></div>原本是<div>{{integralRule}}</di原创 2020-12-01 16:13:20 · 3440 阅读 · 0 评论 -
vue页面获取以及编辑
vue页面获取以及编辑html:<el-row :gutter="20"> <el-col class="task_left"> <el-col :span="4" class="task_list"> 连续签到 <div class="list_num">{{ signCycle }}</div> 天为一个周期 </el-col>原创 2020-12-01 15:42:01 · 1113 阅读 · 0 评论 -
vue删除某一行(查,删)
vue删除某一行列表中,点击删除其中一行:<el-table :data="tableData" style="width: 100%" class="view_table"> <el-table-column prop="updateTime" label="添加时间" align="center" min-width="150" ></el-table-column>原创 2020-12-01 14:55:22 · 9066 阅读 · 0 评论 -
vue编辑弹窗(简)
vue编辑弹窗(简)列表html:<el-table :data="tableData" style="width: 100%" class="view_table"> <el-table-column prop="updateTime" label="添加时间" align="center" min-width="150" ></el-table-column> <el-table-column prop原创 2020-12-01 14:30:50 · 1984 阅读 · 0 评论 -
vue新增弹窗(简)
vue新增弹窗(简)点击添加规则按钮,出现弹窗:<el-row :gutter="24" class="task_titleList"> <el-col :span="4"> 拉新奖励 </el-col> <el-col :span="20" class="task_rulebtn"> <el-button size="small" type="primary" class="right-btnon原创 2020-12-01 14:06:50 · 2151 阅读 · 0 评论 -
vue编辑弹窗
vue编辑弹窗点击编辑,出现编辑弹窗<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="签到" name="first" class="task"> <el-row :gutter="20"> <el-col class="task_left"> <el-col :span="4原创 2020-12-01 11:34:53 · 1584 阅读 · 0 评论 -
vue新增弹窗
vue新增弹窗新增弹窗加校验html:<!-- 添加规则 --> <el-dialog title="签到--添加规则" :visible.sync="addRule.addDialog" width="50%" :before-close="handleaddRule" class="addbox" center > <el-form :model="ad原创 2020-11-30 18:06:29 · 2597 阅读 · 0 评论 -
前端导出excel
前端导出excel1.下载依赖包2. 引用依赖包3. 按钮4.导出6.更改文件名字即可1.下载依赖包npm install -S file-saver xlsx(或者npm install xlsxnpm install file-saver --save)2. 引用依赖包import FileSaver from "file-saver";import XLSX from "xlsx";3. 按钮@click=“exportTable”<el-col :span="1.2原创 2020-11-17 16:05:27 · 1489 阅读 · 2 评论 -
跳转页面跳到不同的Tab
跳转页面跳到不同的Tab点击整行进入详情页面tab点击兑换记录进入tab兑换记录阻止冒泡@click.stop="detailGift()"点击整行进入详情页面tab<el-table :data="tableData" ref="tableDatas" class="view_table" style="width: 100%" id="tableExcel" v-loading="loading" @row-c原创 2020-11-16 15:25:15 · 694 阅读 · 0 评论 -
vue阻止冒泡
vue阻止冒泡在事件后面加上.stop<el-button type="primary" size="small" @click.stop="editgGift()">编辑</el-button >原创 2020-11-16 13:58:34 · 3421 阅读 · 0 评论 -
vue弹窗加校验
vue弹窗加校验点击添加专区的按钮出现添加专区的弹窗根据elementui里面的dialog和form表单写的<div slot="setting"> <el-button type="primary" @click="addSub = true">添加专区</el-button></div>addSub是控制弹窗的显示隐藏:before-close="handleClose"是在点击蒙层或者右上角的叉号的时候事件,比如关闭清空内容等原创 2020-11-11 10:29:54 · 1229 阅读 · 0 评论 -
vue中给搜索列表加loading
vue中给搜索列表加loading在搜索条件中,点击搜索,刷新列表加loading在搜索条件中,点击搜索,刷新列表加loading<el-table :data="tableData" class="view_table" style="width: 100%" id="tableExcel" v-loading="loading" @expand-change="expandchange" > &l原创 2020-11-06 11:35:10 · 923 阅读 · 0 评论 -
vue中按回车键进行条件搜索
vue中按enter键进行条件搜索搜索条件:<el-row class="views_box" :gutter="20"> <el-col :span="4"> <div>商品ID:</div> <el-input v-model="dataForm.id" placeholder="请输入商品ID" @keydown.enter.native="seachEnterFun"原创 2020-11-06 11:02:50 · 3115 阅读 · 0 评论 -
vue给按钮加lodding
vue给按钮加lodding在方法的最前面调用:const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});关闭:close方法:一定要接口返回数据就调用,把load关了,不管报没报错,都要关loading.close();如原创 2020-10-22 17:40:53 · 1077 阅读 · 0 评论 -
vue组件之间的传值(共8种)- ref
vue组件之间的传值(共8种)- ref一. ref使用在父组件上二.ref使用在元素上三.ref使用在子组件上一. ref使用在父组件上父组件html:<information ref='information'></information>import information from './information'components:{information,bill,means},在父组件上使用子组件的值,js :this.$refs.informat原创 2020-10-21 17:42:31 · 5199 阅读 · 0 评论 -
vue项目列表中图片放大
vue项目列表图片放大<el-table :data="tableData" class="view_table" style="width: 100%" id="tableExcel" v-loading="loading" @expand-change="expandchange"> <el-table-column prop="addTime" label="创建时间" align="center原创 2020-10-21 10:34:51 · 860 阅读 · 0 评论 -
简单的vuex
vuexvuex在项目中的位置vuex在项目中的位置vuex一般写到src文件夹下的store文件夹下的index.js中:src—>store—>index.js内容如: index.js:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { phone: "" }, mutations: { phoneCh原创 2020-08-20 16:12:23 · 124 阅读 · 0 评论 -
href跳转
href跳转a标签target="_self"不会再起一个页面a标签target="_self"不会再起一个页面<a href="index_2.html" target="_self">原创 2020-08-17 10:16:47 · 774 阅读 · 0 评论 -
vue-表格查询
vue-表格查询html: <el-row class="order-input" :gutter="20"> <el-col :span="2.2"> <div class="grid-content bg-purple-dark">卡券名称</div> <el-input v-model="dataForm.name" placeholder="输入昵称查询"></el-i原创 2020-08-10 17:12:28 · 2714 阅读 · 0 评论 -
vue router
vue router安装vue router二级目录三级目录安装vue router推荐:vue add router或者npm install vue-router -S二级目录三级目录原创 2020-08-10 14:40:27 · 80 阅读 · 0 评论 -
vue创建项目
vue创建项目npm create 文件名npm create 文件名1.切换目录到桌面:cd Desktop2.创建一个名为router的项目:vue create router 3.切换目录到项目:cd router4.运行项目:npm run serve5.可查看node版本号:node -v...原创 2020-07-27 15:27:04 · 117 阅读 · 0 评论 -
vue项目时间选择器
vue项目时间选择器设置结束时间不能早于开始时间,开始时间不能晚于结束时间html里面:js里面设置结束时间不能早于开始时间,开始时间不能晚于结束时间html里面:<el-form-item label="发布时间:"> <div class="form_item form_content"> <div> <el-date-picker style="width:180px;" v-model="ti转载 2020-07-17 15:24:56 · 1302 阅读 · 0 评论 -
html文档原样转化
html文档原样转化http://ueditor.baidu.com/website/onlinedemo.htmlhttp://ueditor.baidu.com/website/onlinedemo.html原创 2020-07-15 13:16:50 · 98 阅读 · 0 评论 -
Vue项目中重写element-ui组件样式
Vue项目中重写element-ui组件样式在类名前面加个/deep/就可以了在类名前面加个/deep/就可以了如:<style lang="less" scoped>/deep/.el-form-item__content { line-height: 19px; margin-left: 0px;}/deep/.el-button { height: 51px; width: 352px;}/deep/.el-button--primary { backg原创 2020-07-14 10:12:19 · 3535 阅读 · 0 评论 -
vue的数据双向绑定v-model
vue的数据双向绑定v-modelv-model实现原理:新建子组件Input.vue父子组件之间的传值:https://blog.csdn.net/tianjian_zhou/article/details/85077563v-modelv-model双向数据绑定,它做了两件事情:1.绑定了value值 2.监听input事件实现原理:新建子组件Input.vue<template> <div> <!-- v-bind后面是:属性名=,表示绑定这个属原创 2020-07-09 16:53:30 · 192 阅读 · 0 评论 -
vue使用组件
vue使用组件安装element-ui安装element-ui安装依赖npm install 启动项目npm run serve在项目里面安装element-ui,在cmd中输入:vue add element接着会有选择:按需加载Import on demand 以及中文zh-CN下载完毕之后,会发现项目中有些许变化:由于下载的时候选择的按需加载,使用了UI组件都在项目里面加上如:使用了el-input :<el-input v-model="input" plac原创 2020-07-08 17:31:39 · 137 阅读 · 0 评论 -
微信小程序wx:if
微信小程序wx:ifwx:ifwx:if如:当运费不为空并且大于0当时候免运费金额才会出现:wx:if="{{num3!=’’ && num3>0}}" <view class="setting_shop"> <view class="shop_content"> <view class="shop-title"> <text>运费</text>原创 2020-06-22 15:37:17 · 1890 阅读 · 0 评论 -
微信小程序选择地址地图位置
微信小程序选择地址地图位置输入框可能与地图相冲突,把输入框禁用disabled="{{true}}"html:<view class="setting_shop" bind:tap="goSelectMap"> <view class="shop_content"> <view class="shop-title"> <text>发货地址</text> </view>原创 2020-06-19 12:27:56 · 498 阅读 · 0 评论 -
微信小程序返回上一级页面
微信小程序返回上一级页面wx.navigateBack({ delta: 1 //返回上一级页面})wx.navigateBack({ delta: 1 //返回上一级页面})html:<view class="refusea_btn"> <van-button type="primary" size="large" bind:tap="submit">保存</van-button></view>js://提交 submit(原创 2020-06-19 10:50:46 · 4559 阅读 · 0 评论 -
微信小程序之事件(bindtap和catchtap)
微信小程序之事件(bindtap和catchtap)bindtap和catchtap都是绑定事件bindtap和catchtap都是绑定事件bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。...原创 2020-06-19 10:26:08 · 408 阅读 · 0 评论 -
微信小程序信息输入框即数据双向绑定
微信小程序信息输入框的写法在这里插入图片描述首先进行数据双向绑定首先接口如下静态写好,开始进行数据双向绑定首先进行数据双向绑定由于微信小程序是单项数据流,在使用输入框的时候必须先进行数据双向绑定首先接口如下静态写好,开始进行数据双向绑定html:<view class="setting_shop"> <view class="shop_content"> <view class="shop-title">原创 2020-06-19 10:22:59 · 3270 阅读 · 0 评论 -
微信小程序自定义组件
微信小程序自定义组件自定义组件名写在html中在json文件中导入(外页面标题的改变)在components组件中写入所有的组件自定义组件名写在html中<origin-item wx:for="{{ item.list }}" wx:key="index" wx:for-item="o" origin="{{ o }}" isShowId="{{isShowId}}" bind:click="onHandelStatus"></origin-item>在json文件中导入(原创 2020-06-16 13:23:55 · 124 阅读 · 0 评论 -
图片裁剪
图片裁剪地址:https://we-plugin.github.io/we-cropper/#/地址:https://we-plugin.github.io/we-cropper/#/原创 2020-06-15 19:45:32 · 109 阅读 · 0 评论 -
微信小程序
微信小程序发版上线发版上线进入之后上线发版上线微信公众号扫码登陆,选项目进入之后找到版本管理会看到下面的开发版本,是微信小程序上面点击上传打得代码包上线可以选择提交审核,审核通过才可上线,审核不通过,会有错误的地方的提示同时也可以点击箭头选择发个体验版...原创 2020-06-15 19:32:22 · 174 阅读 · 0 评论 -
运算符
运算符运算符算术运算符一元运算符isNaN()关系运算符二元运算符赋值运算符逻辑运算符条件运算符运算符一、运算符可分为:算术运算符关系运算符逻辑运算符条件运算符二、根据操作数不同可分为:一元运算符二元运算符三元运算符算术运算符算术运算符: + - * / %<script type="text/javascript">var a=3+5...原创 2019-03-30 11:55:08 · 229 阅读 · 0 评论