搜索到
52
篇与
的结果
-
vue页面内锚点跳转 这两天想用刚学的Vue做一个网址导航，刚好手里有一个域名v1.pw，于是唯一导航便诞生了。Element真的踩坑无数，不同组件嵌套起来有不同奇葩BUG。然后我想的是右边的菜单导航，点击之后页面就滑动到相应的地方，因为导航比较简单，所以基本上就在一个页面了。一开始想的是用a标签的跳转，然后把那些分类的id就弄为href属性。然后发现页面直接跳转了。在网上发现了Element.scrollIntoView()https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView在methods里面定义一个跳转方法 skip(targetId) { let el = document.getElementById(targetId) if (el) { el.scrollIntoView({behavior: "smooth"}) } }在页面里面调用@click="skip('tab-'+item.category.id)"就可以达到想要的效果了 -
vite2+vue3配置axios跨域 在根目录下有一个vite.config.jsimport {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'https://sing.lanol.cn/', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } } })
-
ES6数组根据对象的某个属性去重 前言：es6的数组根据他其中某一个对象的key值来去重的封装方法封装方法如下： unique(arr, val) { const res = new Map() return arr.filter(item => !res.has(item[val]) && res.set(item[val], 1)) },调用使用方法：第一个参数是数组，第二个参数是你要根据哪个字段来去重 this.unique(DataList, 'GoodsId')来源：https://blog.csdn.net/qq_41619796/article/details/106259333
-
Vue3将数据导出为Excel—公司偷学技术的第1天 有一个任务要求是这样的，将抓取到的数据展示在页面之后，可以点击按钮导出问Excel文件。然后我翻项目原先的代码，也有类似的功能，并且导出之后网络图片也能够保存下来。用到了js-table2excel第一步安装 npm install js-table2excel第二步引入 import table2excel from 'js-table2excel'第三步使用 table2excel([列集合], [数据集合], '导出文件名')第三步生成表格需要传入三个参数列集合，数据集合和文件名。列集合格式如下：const column = [ { 'title':'表格中显示的标题', 'key':'数据集合中的键', 'type':'数据类型，text，image', 'width':'如果type为image可以设置宽度', 'height':'如果type为image可以设置高度', },{ 'title':'表格中显示的标题', 'key':'数据集合中的键', 'type':'数据类型，text，image', 'width':'如果type为image可以设置宽度', 'height':'如果type为image可以设置高度', }, ]至于数据集合这块要求不能套娃，就是数据必须全部在第一层，我就是因为这个然后踩坑了，不得不重新将数据清洗才传入，我的大概就是这样的。const exportData = [ { 'first':{ 'name':'张三', 'age':'18', }, 'second':{ 'money':1000, 'data':1 } },{ 'first':{ 'name':'A', 'age':'18', }, 'second':{ 'money':1000, 'data':1 } }, ]然后就报错了，被迫改成这样const exportData = [ { 'name':'张三', 'age':'18', 'money':1000, 'data':1 },{ 'name':'李四', 'age':'18', 'money':1000, 'data':1 }, ]图片源于网络，差不多这样
-
复制粘贴插件——clipboard.js的使用 clipboard.js为什么将文本复制到剪贴板应该不难。它不应该需要几十个步骤来配置或加载数百 KB。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。这就是 clipboard.js 存在的原因。安装你可以在 npm 上得到它。npm install clipboard --save或者，如果您不喜欢包管理，只需 https://github.com/zenorocha/clipboard.js/archive/master.zip 。设置首先，包含位于dist文件夹中的脚本或从 第三方 CDN 提供商 加载它。<script src="dist/clipboard.min.js"></script>现在，您需要通过传递 DOM 选择器、HTML 元素或HTML 元素列表来实例化它。new ClipboardJS('.btn');在内部，我们需要获取与您的选择器匹配的所有元素，并为每个元素附加事件侦听器。但猜猜怎么了？如果您有数百个匹配项，则此操作会消耗大量内存。出于这个原因，我们使用事件委托，将多个事件侦听器替换为单个侦听器。毕竟，#perfmatters。用法我们正在经历一个声明式的复兴，这就是为什么我们决定利用HTML5 数据属性来提高可用性。从另一个元素复制文本一个非常常见的用例是从另一个元素复制内容。您可以通过data-clipboard-target在触发器元素中添加属性来实现。您在此属性中包含的值需要与另一个元素选择器相匹配。<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>从另一个元素剪切文本此外，您可以定义一个data-clipboard-action属性来指定您是否想要copy或cut内容。如果省略此属性，copy将默认使用。<!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>正如您所料，该cut操作仅适用于或元素。从属性复制文本事实是，您甚至不需要另一个元素来复制其内容。您可以只data-clipboard-text在触发器元素中包含一个属性。<!-- Trigger --> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button>活动在某些情况下，您希望显示一些用户反馈或捕获复制/剪切操作后选择的内容。这就是为什么我们会触发诸如success和 之类的自定义事件以error供您聆听和实现您的自定义逻辑。var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });高级用法如果您不想修改 HTML，可以使用非常方便的命令式 API。你需要做的就是声明一个函数，做你的事情，然后返回一个值。例如，如果您想动态设置 a target，则需要返回一个 Node.js 。new ClipboardJS('.btn', { target: function(trigger) { return trigger.nextElementSibling; } });如果您想动态设置 a text，您将返回一个字符串。new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); } });要在 Bootstrap Modals 或任何其他更改焦点的库中使用，您需要将焦点元素设置为container值。new ClipboardJS('.btn', { container: document.getElementById('modal') });此外，如果您正在使用单页应用程序，您可能希望更精确地管理 DOM 的生命周期。以下是清理我们创建的事件和对象的方法。var clipboard = new ClipboardJS('.btn'); clipboard.destroy();
-
Vue2封装axios，axios在Vue.cli中的使用 添加http.js文件在src目录下新增一个目录utils，并新增一个js文件http.js，用以实现axios的封装 编辑http.js，首先导入axios import axios from 'axios'定义Http Request公共信息，用以添加授权等 axios.interceptors.request.use( config => { let token = 'lanol' config.headers.token = token; if (config.method == 'get') { config.params.token = token } if (config.method == 'post') { config.data.token = token } return config; }, error => { return Promise.reject(err); } )封装Get方法export function get(uri, params = {}) { return new Promise((resolve, reject) => { axios.get(uri, { params: params }) .then(response => { resolve(response.data) }) .catch(err => { reject(err) }) }) }封装POST方法export function post(uri, data = {}) { return new Promise((resolve, reject) => { axios.get(uri, { params: params }) .then(response => { resolve(response.data) }) .catch(err => { reject(err) }) }) }封装patch请求export function patch(url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data) .then(response => { resolve(response.data); }, err => { reject(err) }) }) }封装PUT请求export function put(url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data) .then(response => { resolve(response.data); }, err => { reject(err) }) }) }实现跨域const downloadUrl = url => { let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = function() { document.body.removeChild(iframe) } document.body.appendChild(iframe) }Main.js中引用import axios from 'axios' import {get,post} from '@/utils/http.js' Vue.prototype.$ajax = axios Vue.prototype.$post = post Vue.prototype.$get = get使用http.js<template> <div id="app"> {{Lan}} </div> </template> <script> import axios from '@/utils/http.js' export default { name: 'app', components: { }, data() { return { Lan: '' } }, mounted() { this.$get('https://v1.hitokoto.cn').then((response)=>{ this.Lan = response.hitokoto console.log(response); }) } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 参考链接https://www.cnblogs.com/zhangbs/p/9681032.html
-
