风继续吹&-CSDN博客

原创改变uniapp中的swiper中指示点的样式

在App.vue中的style中写样式(点击检查看指示点的class名自己写样式)<style> uni-swiper .uni-swiper-dot{ width: 60rpx; height: 20rpx; border-radius: 50rpx; } .uni-swiper-dots-horizontal{ left: 80% !important; /* width: 300px ; */ }</style>...

2021-10-21 16:21:48 1741

原创小程序引入自定义组件

1.在父组件。。。.json文件中引入子组件{"enablePullDownRefresh":true, "backgroundColor":"#ccc", "usingComponents": { "自己定义的单词例如proList":"引入组建的路径" }, "navigationBarTitleText":"页面头部的标题"}2.在父组件。。。.wxml渲染子组件 //定义的属性<proList proList="{{proList}}"&g

2021-09-18 17:14:31 316

原创 css3属性

1.实现多边形(clip-path)//每个点x轴和y轴的坐标clip-path:polygon(52px 0px, 325px 0px, 305px 233px, 279px 265px, 0px 265px, 0 38px)参考博客2.改变图片的方法filter:blur( ) 高斯模糊给图像一个高斯模糊效果，length值越大，图像越模糊img { filter:blur(2px);;}参考博客。。。...

2021-09-16 10:21:03 167

原创 vue轮播组件文字滚动vue-seamless-scroll

1.安装依赖 npm i vue-seamless-scroll -S2.局部注册import vueSeamless from 'vue-seamless-scroll' export default { components: { vueSeamless } }3.使用HTML <vue-seamless-scroll :data="pt3Data.list[pt3Data.index].

2021-09-10 11:53:36 842

原创网格布局案例

1.为大盒子添加display:grid样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0".

2021-09-06 00:27:21 261

原创全屏显示页面

//全屏显示 screen() { // let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果 let element = document.getElementById("tab"); //绑定按钮的id if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen()

2021-08-31 08:35:07 145

原创封装表格分页

分页<template> <el-pagination v-if="total > 0" :background="true" :ref="name" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[100, 200, 300, 400]" :p

2021-08-25 21:01:14 148

原创实现四个小角

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.

2021-08-15 00:14:52 110

原创 webpack

1.安装webpackcnpm i webpack@4 webpack-cli@3 -gcnpm i webpack@4 webpack-cli@3 -S2.创建webpack.config.js放在创建config文件下，在src下面创建index.js3.控制台输入打包项目测试，注意不同的形式默认打包的文件名称不一样webpack --config './config/webpack.config.js'4.配置入口文件出口文件const path=require('path')

2021-08-01 13:13:23 127

原创微信小程序（下拉刷新）

// pages/home/home.js//引入封装的数据请求import { getBannerList, getProList } from './../../api/home'Page({ /** * 页面的初始数据 */ data: { width: '0px', statusBarHeight: '0px', bannerList: [], proList: [], scrollTop: 0, count: 2 //

2021-07-18 21:43:50 126

原创小程序——数控请求的封装

在utils中创建一个request.js的文件// 小程序提供了数据请求的方案// https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.htmlconst baseURL = 'http://121.89.205.189/api'const app = getApp()// 小程序要求请求的地址必须是 https协议的，还必须是备案过的域名// 如果你的小程序的接口不满足，开发阶段可以

2021-07-15 20:27:17 332

原创后台登录、校验、预验证、重置表单

<template> <div class="login-form">   <el-form status-icon ref="loginRef" label-width="100px" class="demo-ruleForm" :rules="rules

2021-07-12 15:44:00 397

原创搜索实现vue+Element-ui仿商城搜索

<template> <div>  <van-search v-model="kw" shape="round" placeholder="请输入搜索关键词" show-action autofocus @input="searchInput" > <template #action> &l..

2021-07-05 12:03:55 529

原创封装路由（简易）

先创建一个文件夹例如：const TAOBAO_CLASSIFY = '/taobao/classify'const TAOBAO_GUESS = '/taobao/guess'export default { TAOBAO_CLASSIFY, TAOBAO_GUESS}在main.js中引入import path from './http/path'Vue.prototype.$path = path使用：<template> <div&gt

2021-07-05 10:34:24 180

原创登录管理(权限管理) token

login登录模块（每个成员只能看加自己的模块）<template> <div class="login-form"> <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="账号"> <el-input v-mo

2021-07-02 16:09:33 501

原创 vuex 五个状态基本使用 + 数据持久化(永久存储)

store下面的 index.jsimport Vue from 'vue'import Vuex from 'vuex'// 引入模块import newsModule from './news'// 数据持久化import createPersistedState from "vuex-persistedstate"Vue.use(Vuex)export default new Vuex.Store({ state: { //用于保存状态 msg: 'hello',

2021-07-01 20:58:43 399

原创图片预览（react）

import React, { Component } from 'react'export default class App extends Component { fileRef = React.createRef() imgRef = React.createRef() previewImage = () => { const file = this.fileRef.current.files[0] const reader = new FileReader()

2021-06-27 20:24:40 328 1

原创文件上传前的预览（原生）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="file.

2021-06-27 13:27:29 100

原创 css实现雾面玻璃效果

给表单加cssbackground: hsla(0, 0%, 100%, 0.3); backdrop-filter: blur(7px);

2021-06-23 20:55:53 395

原创 vue中使用sortable插件实现拖拽 upload上传图片改变顺序

下载依赖 npm install sortablejs --save在script里面导入import Sortable from "sortablejs";在需要改变顺序的标签上加上id=" 自定义"页面：<el-form-item label="商品主图"> <div class="upload-from" id="itxst">  <div v.

2021-06-18 11:19:48 883

原创富文本编辑器——wangEditor

安装 cnpm i wangeditor --save创建一个div, id与下面的一致看文档开始使用------基本使用-----npm安装复制粘贴到mounted里面可以看其他配置信息例如图片<template> <div> <el-form label-width="100px"> <el-form-item label="商品标题"> <el-input type="te.

2021-06-18 08:50:23 155

原创 vue+element-ui 实现增删改

<template> <div> <el-button @click="add">添加数据</el-button> <el-table style="width: 100%" :data="list">   .

2021-06-16 17:14:50 184

原创后台管理系统(页面布局模板)使用 element-ui

<template> <el-container>  <el-header> <div class="header"> <div class="header-left"> <span v-if="!isFold">电商后台管理系统</span> <span v-else class="el-icon

2021-06-11 09:01:46 704

原创 vue+element-ui 实现todoList(增删改查)

<template> <div> <el-input placeholder="请输入内容" v-model="input" @change="submit" style="width: 200px; margin: 20px 0px" > <!-- <template #suffix> <div class="icon"> .

2021-06-08 17:51:18 734

原创路由全局守卫——利用路由改变页面上面显示内容

在router里面import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Main', component: () => import('@/views/Main.vue'), redirect: '/main/a', children: [ { path

2021-06-04 19:21:43 142

原创 axios获取接口简单渲染页面

先在main.js中配置全局 axiosimport axios from "axios";Vue.prototype.$axios=axios列表页<template> <div> <ul> <li v-for="(item, index) in list" :key="index" @click="goto(item)"> {{ item.title }} </li> &

2021-06-04 11:47:01 791

原创 vue传参

query传参 //类似于get请求this.$router.push({ path: "/main/c/detail", query:{ id:item.id }, }),接受参数{{$route.query.id}}name传参// 类似于post请求 name请求也可用params和query方式传参 this.$router.push({ name: "detail",

2021-06-03 16:42:05 69

原创自定义组件案例 todolist (增、删、改、查)

App.vue<template> <div> <my-button @enter="submit" clear></my-button> <my-list :data="list" @del="del" @update="update"></my-list> </div></template><script>import Input from "@/views/In

2021-06-03 08:22:49 160

原创动态组件 component 缓存动态组件 keep-alive

<template> <div> <button @click="com = 'Header'">header</button> <button @click="com = 'Footer'">footer</button>  <keep-alive>  <component :

2021-06-02 19:18:23 155

原创 vue监听 watch

<template> <div> {{ i }} <button @click="i++">+</button> <div> {{ stu.age }} <button @click="addage">+</button> </div> <hr> <button @click="add2">数组+&lt

2021-06-02 08:58:35 84

原创过滤器 filters(全局) 计算属性

<template> <div> <div>{{ i }}</div> <button @click="i++">+</button> <button @click="add">追加</button> <hr /> <div>{{ msg | time|hh }}</div> <div>{{ msg2 }}&lt

2021-06-02 08:21:38 244

原创 vue自定义指令

局部指令<template> <div> <div v-color='c'>123123</div> <div v-color="'pink'">hello</div> </div></template><script>export default { data(){ return{ c:'red'

2021-06-01 23:42:42 161 2

原创 Vue中的双向绑定v-model

vue双向绑定的原理vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的实现步骤：1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者<template> <div> <input type="text" v-model.

2021-06-01 22:43:02 80

原创 Vue中的v-bind属性绑定

<template> <div> <input type="text" v-model="url" /> <a :href="url" :title="title">跳转</a> <div :style="s">颜色</div> <ul> <li :class="{active:sel==1}" @click="sel=1">我的</li&gt

2021-06-01 22:14:21 181

原创 Vue中 v-html,v-text渲染页面 , 遍历数组v-for 显示隐藏v-show

<template> <div> <h2>渲染页面</h2> {{ msg }} <div v-text="msg"></div> <div> <span style="color: red">{{ price }}</span> <s>{{ oldprice }}</s> </div>

2021-06-01 17:43:58 365

原创 vue父子组件传值

App.vue<template> <div> <h3>app.vue</h3> <input type="text" v-model="val" /> <div>header值{{ val2 }}</div> <hr /> <my-header :val="val" @get="getval"> <template #header&g

2021-05-27 16:30:24 62

原创 vue自定义指令

在methods里面写：（一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。我们会在稍后讨论渲染函数时介绍更多

2021-05-26 19:55:38 63

空空如也

空空如也