- 博客(113)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 nuxt报错 node.getIterator is not a function
之前使用"postcss-px2rem" 和 “ postcss-px2rem-exclude”卸载postcss-px2rem 和 postcss-px2rem-exclude。安装 “postcss-pxtorem”: “^5.1.1” ，这个版本不会出错。会出现node.getIterator is not a function 问题。nuxt.config.js中配置。
2023-05-17 14:45:58
1474
原创 nuxt移动端自适应，刚进页面会变形，解决方法
使用nuxt+vant，引入自适应插件lib-flexible.js，之后在nuxt.config.js中定义插件，如果将ssr设为true,会报windon is not defined.所以将ssr改为false;但是会产生一进入页面，页面先缩小，之后就放大原因是：引入的插件是在客户端渲染的，进入页面，没有一个固定的字体大小，就会出现这种情况解决方法：使用flexible.js和postcss-px2rem1.将flexible.js放入static，当做静态文件flexible.js内容
2021-12-22 12:18:41
2532
1
原创 vue+elementui使用富文本编辑器vue-quill-editor
1）安装插件npm install vue-quill-editor –-save2）引入插件import quillEditor from 'vue-quill-editor'//引入css样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'3)声明组件components:{quillEditor}4)使用组件...
2021-12-01 15:28:29
517
原创 ant design pro 使用图片随机码
class 【ComponentName 】 extends Component{ state={ loadings:false, code:undefined, codeLength:4, fontSizeMin:28, fontSizeMax:30, backgroundColorMin:240, backgroundColorMax:250, colorMin:10, colorMax:20, li
2021-12-01 15:28:10
432
原创 vue移动端图片曝光
1.安装intersection-observer插件npm install intersection-observer2封装exposure类import 'intersection-observer';import { imgExposureApi } from '@/api/common'//节流时间，默认是100ms// IntersectionObserver.prototype['THROTTLE_TIMEOUT'] = 300;export default class Exp
2021-12-01 15:27:50
309
原创 nuxt使用elementui搭建项目(五)：vuex持久存储
1，安装插件npm install vuex-persistedstate2.plugins/localStorage.js文件中import createPersistedState from 'vuex-persistedstate'export default ({store}) => { createPersistedState({ storage: localStorage, })(store)}3.nuxt.config.js中配置plugins:[
2021-12-01 15:26:28
609
原创 nuxt使用elementui搭建项目(四)：nuxt自定义路由
1.在根目录下新建router/index.js// router/index.js// 引入pathimport path from 'path'// 要使用 process.cwd()const resolve = (pagePath) => path.resolve(process.cwd(), `./${pagePath}`)export const $routes=[ { path:'/', redirect:'/login' }, { p
2021-12-01 15:25:11
700
原创 nuxt使用elementui搭建项目(三)：elementui按需加载
1.安装element-uinpm i element-ui -Snpm install babel-plugin-component --save-dev2.在 plugins 文件夹下新建 element-ui.js 文件import Vue from 'vue';import {Button} from 'element-ui';const components=[ Button]const Element ={ install(Vue){ components.fo
2021-12-01 15:23:14
733
原创 nuxt使用elementui搭建项目(二)：多环境配置
1.安装插件npm install --save-dev cross-envnpm install @nuxtjs/axios2.根目录下创建.env.jsmodule.exports ={ /*测试环境1*/ test1:{ NODE_ENV: 'dev', ENV_API:'ip地址1', }, /*测试环境2*/ test2:{ NODE_ENV: 'dev', ENV_API:'ip地址2' }, /*正式环境*/ prod:
2021-12-01 15:19:44
1123
1
原创 nuxt项目中，给vue组件添加script标签
vue项目是单页面应用，对seo不友好，这就是使用nuxt创建项目的原因。一般script标签都是全局引入，一般在app.html中统一引入。如果要单独在一个页面引入script,就不能在app.html中引入、单个组件中head()中主要是title,meta的信息，想要引入的外联要在这里引入header(){ title:"", meta:[ { type:'', json:{} } ]}...
2021-11-12 14:16:28
2501
原创 使用intersection-observer 完成图片曝光
曝光埋点：记录某个商品(dom元素)出现在可视区的频率，平台通过大数据分析出用户的习惯，从而达到购买力的效果。dom滑动至可视区域，1、安装polyfill插件npm install intersection-observer 2.封装Exposure类(utils/exposure.js)mport 'intersection-observer';import { imgExposureApi } from '@/api/common'；//调用的接口//节流时间，默认是100ms// I
2021-09-28 16:04:19
521
原创 vue项目多环境打包和运行
npm install --save cross-env修改package.json"scripts": { "start:aaa": "cross-env NODE_ENV=development env_config=aaadev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start:bbb": "cross-env NODE_ENV=development env_config=b
2021-09-28 16:01:14
257
原创 vue使用自定义指令，限制输入框的小数位数
//限制输入框输入的小数Vue.directive("input-limit", { bind(el, binding) { var wins_0 = /[^\d]/g //整数判断 var wins_1 = /[^\d^\.]/g //小数判断 var flag = true; var points = 0; var lengths = 0 var remainder = 0 var no_int = 0 const target =
2021-08-09 19:37:59
574
2
原创 vue中使用NProgress
1.安装插件npm install --save nprogress2、使用router.js中引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'router.beforeEach((to, from, next) => { NProgress.start() next()})router.afterEach(() => { NProgress.done()})*修改颜色在
2021-06-17 16:53:10
133
原创 ant design pro拖住滑块，向右移动
创建ImageCode组件 components |- ImageCode |-icons （存放图标的文件夹） |-index.tsx |-index.lesscomponents/ImageCode/index.tsx// index.js/** * @name ImageCode * @desc 滑动拼图验证 * @author darcrand * @version 2019-02-26 * * @param {String} imageUrl 图
2020-11-24 09:58:04
698
原创 vue-element-admin
git clone https://gitee.com/panjiachen/vue-element-admin.git npm install npm run dev
2020-11-23 17:28:03
171
原创 Ant designpro(12):下拉框
import {Dropdown} from 'antd'import {BarsOutlined } from '@ant-design/icons';const operateList =[ {val:'talked',name:'XXXX',icon:<UserOutlined style={{fontSize:15}}/>}, {val:'confirmed',name:'XXXX',icon:<AppstoreOutlined style={{fontSize
2020-11-13 17:19:42
703
原创 Ant design pro常用(7)：导出数据excel
1.安装插件 npm install xlsx --S2.组件使用import XLSX from 'xlsx' //凑需要的数据 形式为（二维数组）const aoa=[ ['id','作者','内容','阅读量','发表时间'], ['1','张三','内容1111'，'120','2020-1-2'], ['2','张三','内容1111'，'120','2020-1-2']
2020-11-10 10:03:12
827
原创 Ant design pro常用(9):Tabs的使用
import {Tabs} from 'antd';class OperateComponent extends Component{ render(){ //设置destroyInactiveTabPane，不然会渲染多次（小于TabPane的长度） <div className="company_model"> <div className="card-container"> <Tabs type="card" .
2020-11-10 10:02:59
3761
原创 Ant design pro常用(10):使用models中数据
import {connect} from 'dva'const mapState=({organization})=>{ const {departmentList} = organization; return departmentList}@connect(mapState)class OperateComponent extends Component{ 先定义一个state state={ list:[] }; componentDidMo
2020-11-10 10:02:51
546
原创 Ant design pro常用(11):富文本编辑器
1.安装组件npm i wangeditor --save2.组件使用import Editor from 'wangeditor'class OperateComponent extends Component{ editorRef = React.createRef();//创建对象 state={ answer:undefined }; componentDidMount(){ this.initEditor();
2020-11-10 10:02:34
3138
原创 Ant design pro常用（8):上传图片
components/FileUpload/index.tsx(创建组件)import React, { Component } from 'react'import {Form,Upload,Modal,notification} from 'antd';import axios from 'axios'import {connect} from 'dva'import {getUserID} from '@/utils/memory'import {PlusOutlined} from '@
2020-11-10 10:02:27
920
原创 Ant design pro常用(6):常用的Form.Item
电话号码<Form.Item label='联系方式' name='telephone' rules={[ {required:true,message:'请输入联系方式'}, {pattern:/^1(3|4|5|6|7|8|9)\d{9}$/,message:'电话号码格式不正确'} ]}> <Input placeholder='联系方式' maxLength
2020-11-10 10:02:17
1288
原创 Ant design pro常用(5)：Form属性的赋值
form 属性的赋值form中的数据属性尽量弄成undefinedimport { FormInstance } from 'antd/lib/form';const layout = { labelCol: { span: 4 }, wrapperCol: { span:15 }, }; class OperateComponent extends Component { formRef = React.createRef<FormInstance >();
2020-11-09 10:57:00
3990
2
原创 Ant design pro常用(3):ant design pro实现打印
1.安装插件npm install --save react-to-print2.插件引入import ReactToPrint from 'react-to-print';3.插件使用<ReactToPrint trigger={()=><Button type="primary" size='large'>打印</Button>} content={() => this.componentRef}/>//要打印的内
2020-11-09 10:48:10
1495
原创 Ant design pro常用组件(2):Table使用分页
utils/toolUtils.ts(公共的方法)import config from './config' //config.pageSize=20;//其中length是调用接口获取的数据的长度export function getTotal(length:number,page:number){ return length === 0 ? page * config.pageSize + length : (page-1)*config.pa
2020-11-09 10:46:33
1546
原创 Ant design pro常用组件( 1 ):Modal的常用写法
import {Modal } from 'antd';class CustomerDetail extend Component{ render(){ return ( <Modal width={750} title='' visible={this.state.isVisible} footer={null} destroyOnClose
2020-11-09 10:39:51
1079
原创 Ant design pro使用(六):顶部内容的修改
顶部内容，主要在components/GlobalHeader/RightContent.tsx组件中
2020-11-09 10:32:05
2509
原创 Ant design pro使用(五):未登录时自动跳转到登录页，登录之后不再返回登录页
判断是否登录，要在routes中配置 SecurityLayoutconfig/config.tsroutes:[{ path:'/user', layout: false, routes:[ {path:'/user',redirect:'/user/login'}, { path:'/user/login', name:'登录', component:'./User/Lo
2020-11-09 10:30:23
6606
原创 Ant design pro使用(四):请求数据
utils/request.ts文件import { extend } from 'umi-request';import { notification } from 'antd';import {stringify} from 'qs'//导出sessio 和 userid import {getSession,getUserID} from '@/utils/memory'//引入错误码import errorText from './errorText.json'const {code
2020-11-09 10:25:24
1970
原创 Ant design pro使用(三):修改标题及网页图标
getPageTitle 方法会返回 路径名-项目标题修改项目标题config/defaultSettings.ts中修改title修改网页图标得到favicon.ico图片放在public文件夹中修改config/config.ts文件favicon:'favicon.ico'
2020-11-09 10:17:47
3626
原创 Ant design pro使用(二):配置路由
ant design pro的路由配置在 config/config.ts 中pages中创建组件2.配置路由//import {BasicLayout,UserLayout} from '@/layouts'//这种方法会报错不能识别@/layouts模块rotes:[ { path:'/user', component:'../layouts/UserLayout',//如果不使用模板 layout:false routes:[
2020-11-09 10:13:51
2837
原创 Ant design pro使用(一):初始化项目
初始化项目git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project（项目名）cd my-projectnpm install yarn start
2020-11-09 10:00:15
983
原创 react--hook篇
react中常用的两个hook是useState,useEffectuseStateuseState只能作用在函数组件中返回值[数据，改变数据的方法]useEffect参数是一个回调函数不管组件挂载还是渲染，都会调用该方法1.引入import React, {useState,useEffect} from 'react'function App(){ //1.此处0表示count初始值为0 //2.count 相当于 state={count:0} //3.setCou
2020-10-09 15:44:24
153
file-upload.vue
2020-04-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人