秋刀鱼笛滋味
码龄6年
关注
提问 私信
  • 博客：142,040
    问答：183
    142,223
    总访问量
  • 47
    原创
  • 1,429,879
    排名
  • 24
    粉丝
  • 0
    铁粉
IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）
IP 属地：浙江省
  • 加入CSDN时间： 2018-09-14
博客简介：

秋刀鱼笛滋味

博客描述：
分享也是一种学习
查看详细资料
个人成就
  • 获得69次点赞
  • 内容获得27次评论
  • 获得215次收藏
  • 代码片获得310次分享
创作历程
  • 1篇
    2022年
  • 1篇
    2021年
  • 3篇
    2020年
  • 30篇
    2019年
  • 12篇
    2018年
成就勋章
TA的专栏
  • 提升团队效率
    1篇
  • react-native
    7篇
  • 原生js
    5篇
  • vue
    11篇
  • react
    4篇
  • webpack
    5篇
  • 项目实战
    34篇
兴趣领域 设置
  • 前端
    javascriptcssvue.jsreact.jses6webpackxhtml前端框架
  • 后端
    node.js
  • 移动开发
    flutter
  • 网络与通信
    https
  • 微软技术
    typescript
  • 学习和成长
    面试
创作活动更多

超级创作者激励计划

万元现金补贴，高额收益分成，专属VIP内容创作者流量扶持，等你加入！

去参加
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

Web Components 原生组件的封装（template、slot、生命周期、传参）

先上图看效果user-card就是一个原生的组件，1，支持传入图像、姓名等props2，支持使用slot，插入html片段，使用同vue类似3，支持使用template标签，写组件模板4，支持调用组件的方法，也可以传入方法给组件调用5，兼容性良好，纯原生，主流浏览器都兼容核心API1，自定义元素customElements.define(tag-name,tagClass,{extends:tagname})第一个参数：标签名，才- 横线连接小写子母第二个参数：标签的类eg:cl
原创
发布博客 2022.05.30 ·
1820 阅读 ·
1 点赞 ·
0 评论 ·
7 收藏

vue指令：v-focus实现el-input获得焦点，input获得焦点时不弹起键盘

背景大量的页面需要进入时获得焦点，还有安卓pda扫描设备，需要获得焦点时，不触发键盘弹起。源码使用vue指令实现。你要不是用的vue， 也可以提取出来，@focus配合函数 实现。// 添加全局v-focus指令Vue.directive("focus", { inserted: function(el, { modifiers: { noKeyboard } }) { try { const tagName = el.tagName; if (tagName
原创
发布博客 2021.08.25 ·
3176 阅读 ·
0 点赞 ·
7 评论 ·
7 收藏

怎么把网页中的文本框背景设为透明？

答:

 

回答问题 2021.05.12

怎么把网页中的文本框背景设为透明？

答:
<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>Document</title>
    
</head>
<body style="
    background: black;
">
    <input type="text" style="
    background: transparent;
">

</body></html>

 

回答问题 2021.05.12

vue继承一个组件,对element-ui二次开发

vue继承一个组件， 进行二次开发的简单方法eg:修复原组件prefix，放长文本 样式错烂的问题， props和方法跟原组件el-select相同<template> <div class="rys-select"> <div class="rys-select-prefix" :style="prefixStyle"> <slot name="prefix"></slot> </div>
原创
发布博客 2020.12.12 ·
2601 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

常用table组件封装（函数组件，render函数， 动态slot）

功能：1，key-value类型的展示（如图）2，value支持显示省略号，自带title, 合并格（列）3, value单元格支持使用render,slot,html自定义功能效果图：使用示例：egData试用主组件的示例 <CustomerTable :tableData="egData" > <template slot-scope="{value}" slot="name"> slot渲染： {{v
原创
发布博客 2020.12.02 ·
1016 阅读 ·
1 点赞 ·
2 评论 ·
3 收藏

团队代码风格统一、一键格式化整个项目、自动格式化代码

想团队项目开发中，由于大家的代码风格不一致，会导致代码难以管理，看起来很烂，新人难以快速看懂等问题。通过下面的方式，大家的代码风格，在按下保存时，将会保持为一致。相关文件在 附件一，安装插件到开发环境：cnpm i prettier eslint-config-prettier eslint-plugin-prettier -D二， 添加必要的配置：1，在根目录新建.vscode而文件夹，下面新建settings.json文件，这样就可以在保存时使用prettier和eslint自动格式一下代码
原创
发布博客 2020.05.26 ·
3129 阅读 ·
1 点赞 ·
0 评论 ·
4 收藏

react-native Text上下居中 一像素问题

1,Text 组件设置lineHight=hight, textAlignVertical:'center',一些安卓设备上还是不能上下居中 hock: <View style={{ justifyContent: "center",alignItems: "center",}}> <Text>122</Text> </V...
原创
发布博客 2019.11.14 ·
589 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

react-navigation 常用方法总结

1，创建底部选项卡 createBottomTabNavigatorimport React from "react";import { StyleSheet, Image } from "react-native";import {setSpText, scaleSizeW} from '../utils/util';import Home from '../page/home/home...
原创
发布博客 2019.11.14 ·
553 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

react-native 封装一个可以滑动的步骤条 Step

可以根据prop (step)滑动 到指定位置，可以左右滑动import React, { Component } from "react";import { Text, View, StyleSheet, ScrollView, TouchableOpacity} from "react-native";import { scaleSizeW, setSpText...
原创
发布博客 2019.11.14 ·
1193 阅读 ·
0 点赞 ·
0 评论 ·
4 收藏

react-native 底部弹窗选项卡 + 上传图片 +预览图片

效果图，支持默认图片，上传中的状态，最大上传数量，预览大图等功能import React, { Component } from "react";import { StyleSheet, View, Text, Image, TouchableOpacity, Modal, Platform} from "react-native";import { sca...
原创
发布博客 2019.11.14 ·
739 阅读 ·
0 点赞 ·
0 评论 ·
3 收藏

react-native Toast简单封装

import {Component} from 'react';import Toast from 'react-native-tiny-toast';import {setSpText} from './util';export default class ToastBox extends Component { static show = content => { /...
原创
发布博客 2019.11.14 ·
965 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

react-native AsyncStorage 封装

AsyncStorage 类似localStorage ，不过是异步的 返回Promise/** * AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统， */import {AsyncStorage} from 'react-native';class StorageUtil { /** * 根据key获取json数值 * @param ...
原创
发布博客 2019.11.14 ·
590 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

react-native 自适应

import { Dimensions, PixelRatio, Platform, StatusBar } from 'react-native';import ImagePicker from 'react-native-image-crop-picker';const { width, height } = Dimensions.get('window');import { getI...
原创
发布博客 2019.11.14 ·
524 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

cookie getCookie setCookie delCookie

function getDomain() { var str = document.domain; var index = str.indexOf("."); return str.slice(index+1);}/** * 设置cookie */function setCookie(name, value, days) { var expires = ""; if ...
原创
发布博客 2019.11.05 ·
512 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

webpack实例解析五（用.env.development设置环境变量）

原理：1，利用node的fs模块读取文件处理成对象2，用webpack.DefinePlugin插件，设置process.envreadEnv.jsconst fs = require('fs');const path = require('path');// 读取环境变量的文件把它转化成对象module.exports = (file) => { // flie为文件路...
原创
发布博客 2019.08.13 ·
19803 阅读 ·
8 点赞 ·
0 评论 ·
8 收藏

webpack实例解析四（根据环境分离配置）

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。开发环境：我们需要：强大的 source map（源码映射-> debug） 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server（本地服务器）。生产环境：关注点在于压...
原创
发布博客 2019.08.12 ·
893 阅读 ·
1 点赞 ·
0 评论 ·
1 收藏

webpack实例解析三（devServer）

webpack的devServer，给我们提供了一个本地的node服务器，用于开发模式下调试我们的应用.webpack-dev-server模块启动之后把我们的代码打包到node服务器，提供了热更新，后端代理，自动启动浏览器等实用功能。webpack-dev-server的配置支持两种形式：1，直接在package.json 的 script 命令后面配置、直接控制台 webpack-dev...
原创
发布博客 2019.08.10 ·
956 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

webpack实例解析二(插件)

除了一中的3个参数，webpack的列一个参数plugins，可以干预打包的过程，自动化等等文件下载：链接：https://pan.baidu.com/s/1QTJhqn31uqXhnIXOdvsbyw提取码：ui8k下面以HtmlWebpackPlugin为例，它你能自动把打包的文件引入html，设置各种网页的需求文件初始结构：package.json{ "name": "...
原创
发布博客 2019.08.09 ·
317 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

jquery 倒计时 禁用元素 解开禁用 防止连续点击

// 倒计时 /** * $el jquery对象 */ function countDown($el) { var num = 60 var timer = null var defaultCss = { cursor: 'pointer', 'opacity': 1 } // 默认样式 var disa...
原创
发布博客 2019.08.07 ·
560 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏
加载更多