搜索到
5
篇与
vue3
的结果
-
vue-color-颜色选择器插件 体验入口{abtn icon="fa-link" color="#ff6800" href="http://xiaokaike.github.io/vue-color/" radius="4px" content="入口"/}安装npm install vue-color或yarn add vue-color使用 <div> <div>color-picker</div> <p>Chrome</p> <chrome-picker v-model="colors" /> <p>Sketch</p> <sketch-picker v-model="colors" /> <p>Photoshop</p> <photoshop-picker v-model="colors" /> <p>Material</p> <material-picker v-model="colors" /> <p>Slider</p> <slider-picker v-model="colors" /> <p>Compact</p> <compact-picker v-model="colors" /> <p>Swatches</p> <swatches-picker v-model="colors" /> <p>Twitter</p> <twitter-picker v-model="colors" /> <p>Grayscale</p> <grayscale-picker v-model="colors" @input="updateValue" /> </div><script> import { Material, Compact, Swatches, Slider, Photoshop, Chrome, Sketch, Twitter, Grayscale, } from "vue-color"; export default { name: "color-picker", components: { "material-picker": Material, "compact-picker": Compact, "swatches-picker": Swatches, "slider-picker": Slider, "photoshop-picker": Photoshop, "chrome-picker": Chrome, "sketch-picker": Sketch, "twitter-picker": Twitter, "grayscale-picker": Grayscale, }, data() { return { colors: { color: "", hex: "#194d33", hsl: { h: 150, s: 0.5, l: 0.2, a: 1 }, hsv: { h: 150, s: 0.66, v: 0.3, a: 1 }, rgba: { r: 25, g: 77, b: 51, a: 1 }, a: 1, }, } }, methods: { // 值改变事件 updateValue(value) { console.log(value) console.log(this.color) } } } </script> <style lang="less" scoped> .color { display: flex; flex-wrap: wrap; text-align: center; div { margin: 20px; font-size: 18px; font-weight: bold; border: 1px solid #eee; padding: 10px; } } </style>转自 CSDN -
-
QR Code Styling二维码生成插件 [QR Code Styling] 是用于生成带有徽标和样式的二维码的JavaScript库。 {abtn icon="fa-link" color="#27AE60" href="https://qr-code-styling.com" radius="2" content="效果体验"/}安装npm i qr-code-styling或yarn add qr-code-styling使用<template> <div> <QRCodeVue3 value="Simple QR code" /> <QRCodeVue3 :width="200" :height="200" value="https://blogs.xrpweb.cn/" :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }" :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }" :dotsOptions="{ type: 'dots', color: '#26249a', gradient: { type: 'linear', rotation: 0, colorStops: [ { offset: 0, color: '#26249a' }, { offset: 1, color: '#26249a' }, ], }, }" :backgroundOptions="{ color: '#ffffff' }" :cornersSquareOptions="{ type: 'extra-rounded', color: '#000000' }" :cornersDotOptions="{ type: undefined, color: '#000000' }" fileExt="png" :download="true" myclass="my-qur" imgclass="img-qr" downloadButton="my-button" :downloadOptions="{ name: 'vqr', extension: 'png' }" /> </div> </template> <script> import QRCodeVue3 from "qrcode-vue3"; export default { name: 'QRCodeVue3Example', components: { QRCodeVue3 }, } </script><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QR Code Styling</title> <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script> </head> <body> <div id="canvas"></div> <script type="text/javascript"> const qrCode = new QRCodeStyling({ width: 300, height: 300, type: "svg", data: "https://www.facebook.com/", image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", dotsOptions: { color: "#4267b2", type: "rounded" }, backgroundOptions: { color: "#e9ebee", }, imageOptions: { crossOrigin: "anonymous", margin: 20 } }); qrCode.append(document.getElementById("canvas")); qrCode.download({ name: "qr", extension: "svg" }); </script> </body> </html>React示例 (Codesandbox)Angular示例 (Codesandbox)React示例Angular示例Vue示例API文档QRCodeStyling 实例new QRCodeStyling(options) => QRCodeStyling参数类型描述optionsobjectInit objectoptions 结构属性类型(可选值)默认值描述widthnumber300画布尺寸heightnumber300画布尺寸typestring ('canvas' 'svg')canvas将呈现的元素的类型datastring日期将被编码为二维码imagestring-二维码中心的图标marginnumber0画布周围的边距qrOptionsobject-选项将传递给qrcode-generator库imageOptionsobject-具体图像选项，详细信息见下文dotsOptionsobject-圆点样式选项cornersSquareOptionsobject 角落中的方形样式选项cornersDotOptionsHelperobject 角点样式选项backgroundOptionsobject QR背景样式选项options.qrOptions属性类型默认值typeNumbernumber (0 - 40)0modestring ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')errorCorrectionLevelstring ('L' 'M' 'Q' 'H')'Q'options.imageOptions属性类型默认值描述hideBackgroundDotsbooleantrue隐藏图像覆盖的所有点imageSizenumber0.4图像大小的系数。不建议使用ove 0.5。越低越好marginnumber0以像素为单位的图像边距crossOriginstring('anonymous' 'use-credentials') 如果想从其他来源下载二维码，请设置“anonymous”options.dotsOptions属性类型默认值描述colorstring'#000'QR点的颜色gradientobject QR点的梯度typestring ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded')'square'QR点的样式options.backgroundOptions属性类型默认值colorstring'#fff'gradientobjectoptions.cornersSquareOptions属性类型默认值描述colorstring-角正方形的颜色gradientobject-角隅坡度typestring ('dot' 'square' 'extra-rounded') 角正方形的样式options.cornersDotOptions属性类型默认值描述colorstring 角点颜色gradientobject 角点梯度typestring ('dot' 'square') 角点样式Gradient structureoptions.dotsOptions.gradientoptions.backgroundOptions.gradientoptions.cornersSquareOptions.gradientoptions.cornersDotOptions.gradient属性类型默认值描述typestring ('linear' 'radial')"linear"梯度扩散类型rotationnumber0以弧度为单位的梯度旋转 (Math.PI === 180 degrees)colorStopsarray of objects 渐变色，例如： [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]Gradient colorStops structureoptions.dotsOptions.gradient.colorStops[]options.backgroundOptions.gradient.colorStops[]options.cornersSquareOptions.gradient.colorStops[]options.cornersDotOptions.gradient.colorStops[]属性类型默认值描述offsetnumber (0 - 1) 渐变范围中颜色的位置colorstring 渐变范围内光圈的颜色QRCodeStyleing方法QRCodeStyling.append(container) => void属性类型描述containerDOM element此容器将用于显示二维码QRCodeStyling.getRawData(extension) => Promise<Blob>属性类型默认值描述extensionstring ('png' 'jpeg' 'webp' 'svg')'png'斑点类型QRCodeStyling.update(options) => void属性类型描述optionsobject与初始化选项相同QRCodeStyling.download(downloadOptions) => Promise<void>属性类型描述downloadOptionsobject带有扩展名和文件名的选项（非必填）downloadOptions属性类型默认值描述namestring'qr'下载文件的名称extensionstring ('png' 'jpeg' 'webp' 'svg')'png'文件扩展名
-
vue 全局实现数字千分位格式 这个是啥意思呢 ？ 就是我们在页面上需要渲染数据的时候，比如 88888，我们需要按照千分位显示成方便阅读的格式88,888。这个时候我的做法是vue写一个过滤器，将所有的数据都用这个过滤器过滤一下。因为涉及的数据相对比较多，我就将这个过滤器挂载到了全局，这样就不用再每个页面引用了。转换代码实现首先创建一个文件 numberToCurrency.js ，实现数字千分位转换功能。export function numberToCurrencyNo(value) { if (!value) return 0 // 获取整数部分 const intPart = Math.trunc(value) // 整数部分处理，增加, const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 预定义小数部分 let floatPart = '' // 将数值截取为小数部分和整数部分 const valueArray = value.toString().split('.') if (valueArray.length === 2) { // 有小数部分 floatPart = valueArray[1].toString() // 取得小数部分 return intPartFormat + '.' + floatPart } return intPartFormat + floatPart }好了，这样就实现了，当然如果有其他的需求，具体的转换代码得根据实际来修改。接下来就是引用。引用挂载全局在 main.js 文件中引入刚才的过滤器文件，并且挂载到全局。import { numberToCurrencyNo } from '@/utils/numberToCurrency' // 配置全局过滤器，实现数字千分位格式 Vue.filter('numberToCurrency', numberToCurrencyNo)这样子就可以了，然后在具体需要转换的地方使用一下就OK了。使用使用的话就是普通过滤器的使用方法。<p class="num color1">{{riskAll| numberToCurrency}}</p>ok，结束转载自： 博客园-超级无敌炫酷暴龙战神
-
vue3.0二次封装axios，配置本地代理 vue3.0新建项目二次封装axios，配置本地代理。1、在src文件夹中创建http文件夹并新建http.js和api.js，并在更目录创建vue.config.js文件2、配置http.js文件如果没有安装axios，首先安装axios cnpm install axios -S// 一、配置axios import axios from 'axios' // import store from '@/store/index' 如果使用vuex，那么token，userinfo都可以在登录以后存储到store中，不需要使用storage // 获取浏览器的接口地址。 let baseUrl = window.location.origin // axios配置 axios.defaults.baseURL = baseUrl // 设置请求最大时长 axios.defaults.timeout = 50000 axios.defaults.withCredentials = true // 请求拦截器，设置token axios.interceptors.request.use(config => { if (localStorage && localStorage.getItem('token')) { const token = localStorage.getItem('token') token && (config.headers.Authorization = token) } return config }, error => { // 可以安装elementui等ui组件，将错误信息输出到界面。 console.log(error) return Promise.error(error) }) // 响应拦截器 axios.interceptors.response.use(response => { if (response.status === 200) { // 993登录过期 if (response.data.code !== '993') { return Promise.resolve(response) } else { console.log('登录过期') // store.commit('clearUserInfo') // 使用vuex存储过用户信息，这里需要清空一下。 window.location.href = '/#/login' } } else { return Promise.reject(response) } }) // 2、封装请求方式 // @param url 接口地址 // @param data 携带参数 // @param file 上传文件对象 // @param auth 是否携带token // get请求 export function get (url, data) { return axios.get(url, data) } // post请求 export function post (url, data) { return axios.post(url, data) } // put请求 export function put (url, data) { return axios.put(url, data) } // delete 请求 export function del (url, data) { return axios.delete(url, data) } // upload 请求 export function uploader (url, file) { let params = new FormData() params.append('file', file) return axios.post(url, params) }3、配置api.js文件// 封装后台接口方法 import { get, post, put, del, uploader } from './http' export const LOGIN = (params) => get('service-core/wechat/serviceAccount/qrCode/create', params, false) export const REGISTER = (params) => put('service-core/user_register', params, false) export const USER_LIST = (params) => post('service-core/user_list', params) export const USER_LIST_ID = (params) => get(`service-core/user_list/${params.id}`) export const UPLOAD_USER_CARD = (params) => uploader('service-core/user_upload_card', params) export const DELETE_BOOK = (params) => del(`service-core/book_list/${params.id}`)4、在组件中使用接口import { LOGIN } from '../http/api' export default { name: 'HelloWorld', props: { msg: String }, setup () { onMounted (() => { LOGIN({username: 'zhangxuchao', password: '123456'}).then(res => { console.lo(res) }) }) } }5、配置代理 vue.config.jsmodule.exports = { // 基本路径 publicPath: './', // build后默认路径 baseUrl: './', // 构建时的输出目录 outputDir: 'dist', // 放置静态资源的目录 assetsDir: 'static', // html 的输出路径 indexPath: 'index.html', //文件名哈希 filenameHashing: true, // 是否在保存的时候使用 `eslint-loader` 进行检查。 lintOnSave: true, // 是否使用带有浏览器内编译器的完整构建版本 runtimeCompiler: false, // babel-loader 默认会跳过 node_modules 依赖。 transpileDependencies: [ /* string or regex */ ], // 是否为生产环境构建生成 source map？ productionSourceMap: false, // 设置生成的 HTML 中 <link rel='stylesheet'> 和 <script> 标签的 crossorigin 属性。 crossorigin: '', // 在生成的 HTML 中的 <link rel='stylesheet'> 和 <script> 标签上启用 Subresource Integrity (SRI)。 integrity: false, // 调整内部的 webpack 配置 configureWebpack: () => {}, //(Object | Function) chainWebpack: () => {}, // 配置 webpack-dev-server 行为。 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: true, hotOnly: false, // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理 proxy: { // 接口地址代理 '/service-core': { target: 'https://www.zhangxuchao.com', // 接口的域名 secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 pathRewrite: { "^/service-core": "service-core" } }, //微信二维码登录 "/wechat": { target: "https://www.eastgrain.cn/service-core", secure: false, changeOrigin: true, pathRewrite: { "^/wechat": "" } } } }, // 三方插件的选项 pluginOptions: { // ... } }
