参考地址：https://www.html5tricks.com/html5-css3-circle-menu.htmlGithub地址：https://github.com/ElsonJe/Simple-ui.git 一、效果 二、参考 上面有一个链接地址，我参考了这个插件的源码，没有做太多的改变，只是修改为了适合我当前的需求，并且把步骤和思路大概整理了一下。 因为我本人是个前端小白，对于美仅限于欣赏。三、第一步 首先构建一个样子出来。<template><div class="wrapper"><a href="#" class="show"...
1 安装 npm install easemob-websdk --save 官方安装 ，这种安装要在依赖包配置初始化链接，提交代码时并没把配置提交 使用 hx-websdk 安装npm install --save hx-websdk 2 .使用 新建一个webim.js 放在聊天窗口组件同一层级，为了Emoji图片路径同步import store from ‘@/store/store‘ // window.Strophe = require(‘strophe.js‘).Strophe // let WebIM = require(‘easemob-websdk‘) import WebIM from "hx-websdk"; ...
#### 在写vue项目时，所用的过滤器很多时，把所有的过滤器方法封装在一个文件中，然后导出，并绑定在vue实例上1.在src下创建filters文件夹，并新建index.js文件2. index.js里面的代码import moment from 'moment' const dateFormat = (input, fmtstring) => {// 使用momentjs这个日期格式化类库实现日期的格式化功能return moment(input).format(fmtstring); }const moneyFormat = value => {if (!value) return '0.00';/原来用的是...
<template><div ref="virtual" class="virtual-empty" :style="{ height: height + ‘px‘ }"><div class="virtual-container" :style="{ height: clacHeight + ‘px‘, minHeight: height + ‘px‘ }"><slot :topIndex="topIndex" :bottomIndex="bottomIndex"></slot></div></div></template><script> export default { name: ‘VirtualScroll‘, props: { height: { required: true, type: N...
import axios from "axios"; import qs from "qs"; import { Message } from "element-ui"; import router from "../router";const Axios = axios.create({baseURL: "/", // 因为我本地做了反向代理timeout: 10000,responseType: "json",withCredentials: true, // 是否允许带cookie这些 headers: {"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"} });//POST传参序列化(添加请求拦截器)Axios.interceptors.r...
我后端的，刚接触vue个星期，根据需求写了个上传控件，很灵活的。没有看element el-upload源码，样式用的element的。感觉vue确实好用。<!-- 单文件上传组件 --><template><div><input type="file" id="file" hidden @change="fileChange" :accept="accept"><div v-if="upMode==‘url‘" style="width: 100%;display:inline-flex;"><el-input :value="path" disabled></el-input><el-button size="small" type="primary" @click="bt...
使用方法：1.在父组件中引入"box.vue" //import popUpBox from "./box.vue"; 2.在父组件中注册 popUpBox //components:{popUpBox}, 3.放在父组件中使用 //<popUpBox></popUpBox> 4.调用popUpBox组件 //this.geAlert(0) 注：index.vue为 父组件，后者为子组件，效果图先上，可以先看是否是自己想要的组件，再选择使用index.vue<template><div><popUpBox ref="modal" @on-confirm="confirm"><div slot="modal__bd"><div class="m...
async/await 1）async/await场景 这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。 2）名词解释 >async async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行， async 函数返回的是一个promise 对象。 >await await的含义为等待...
1、安装 axios npm install axios --save2、在src目录里新建目录结构index.js内容 // // axios封装// //1.引入axiosimport axios from ‘axios‘import { addPending, removePending } from "./cancleRequest.js"// // 2. 配置信息const config = { // 每次请求的协议、IP地址。 设置该配置后，每次请求路径都可以使用相对路径，例如"/admin/login" baseURL: "http://ztdoc.wisedu.com", // 请求超时时间 timeout: 10000...
1.在src下新建util文件夹，在util下新建request.js文件：封装axios：import axios from‘axios‘ import QS from‘qs‘; // import store from ‘@/store/index.js‘; import { Message } from‘element-ui‘; //element库的消息提示，可以不用// 环境的切换 // if (process.env.NODE_ENV == ‘development‘) { //开发 // axios.defaults.baseURL = ‘/api‘;} // else if (process.env.NODE_ENV == ‘debug‘) { //测试 // ...
在rsc文件夹下新建model文件夹，再新建storage.jsstorage.js代码： 1var storage={2 set(key,value){3 localStorage.setItem(key,JSON.stringify(value));4 5 },6 get(key){7return JSON.parse(localStorage.getItem(key)); 8 9 }, 10 remove(key){ 11 localStorage.removeItem(key); 12 } 13} 14 export default storage;下面是app.vue 1 <template>2 <div id="app">3 4 <input type=‘...
Vue 封装Toast消息提示学习Vue的道路上,封装一些自定义的组件不可避免，今天就来封装一个Toast消息提示。后面还有dialog对话框，原理差不多。首先先看看效果图现在才知道用qq录制gif图是真方便。(非广告,后面会多用gif图)1 正常组件调用2 全局注册对象调用(不知道是不是叫这个名字)一 首先，我们先封装一个正常组件看看效果。1 首先创建一个最普通的组件/toast/Toast.vue 看看效果.<template><div class="Toast"v-if="showToast">{...
使用Vue做双向绑定的时候，可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.cssul, li {margin: 0px;padding: 0px; }.page-bar {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }.page-button-disabled {color:#ddd !important; }.page-bar li {list-style: none;display: inline-block; }.pag...
接下来，带来js全新技术ES6，结合Vue install全局组件实现Axios封装，以代码形式讲解。1、请求封装//file：src/api/http/http.js import axios from ‘axios‘ axios.create(); axios.interceptors.request.use((config)=>{ //axios请求拦截return config; //记得return请求}) axios.interceptors.response.use((response)=>{return response; }) class http{static async get(url,params,contentType="application/x-www-form-u...
针对上一篇《应用十：Vue之Vue与TypeScript集成开发》的介绍，这里给大家分享一个在近期项目中封装的导入组件，参考组件源码来更好的熟悉.vue文件中脚本的语法。 组件源码：<template><div id="myImport"><el-button type="primary" plain @click="importDialogVisible = true">导入</el-button><!-- 导入弹窗 --><el-dialog :title="name + ‘导入‘" :visible.sync="importDialogVisible" width="560px":close-on-click-modal="f...