_SYY_

_SYY_ 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

_SYY_ 提出了问题 · 2020-12-16

解决CSS3 flex 垂直布局 当flex:1 的标签超出范围 导致页面出现滚动条

需求
1:顶部或者还有底部内容不固定
2:中间内容部分高度为当前窗口 除了顶部底部的高度
3:中间内容超出范围开启滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .container{width:100vw;height:100vh;padding:10px;box-sizing: border-box;display:flex;flex-flow: column;}
        .header{background:red;}
        .content{flex:1;background:#ddd;}
        .list{height:100%;overflow:auto;}
        li{width:100%;height:80px;margin:10px 0;background:yellow;}
    </style>
</head>
<body>
    <div class="container">
        <div class="header"><span>123456</span></div>
        <div class="content">
            <div class="list">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

代码如上 但是写完以后 会出现页面滚动条
请教下哪里写得不对 应该如何修改呢?

关注 2 回答 1

_SYY_ 提出了问题 · 2020-11-10

解决VUE中 input双向绑定的v-model jsx写法 input的值无法清空 如何解决?

<script>
export default {
  name: "Input",
  components: {},
  data() {
    return {
      value_1: "123",
      value_2: "321"
    };
  },
  created() {},
  methods: {
    defaultDom() {
      return (
        <div>
          <input vModel={this.value_1} />
          <button onclick={this.defaultClear}>清空</button>
        </div>
      );
    },
    defaultClear() {
      this.value_1 = "";
    },
    jsxDom(h) {
      return h("div", [
        h("input", {
          attrs: {
            value: this.value_2
          },
          on: {
            input: e => {
              this.value_2 = e.target.value;
            }
          }
        }),
        h("button", { on: { click: this.jsxClear } }, ["清空"])
      ]);
    },
    jsxClear() {
      this.value_2 = "";
    }
  },
  render(h) {
    let inputDOM_1 = this.defaultDom();
    let inputDOM_2 = this.jsxDom(h);
    return h("div", [
      inputDOM_1,
      h("p", [this.value_1]),
      inputDOM_2,
      h("p", [this.value_2])
    ]);
  }
};
</script>

<style lang="less" scoped></style>

如上图所示 分别有两个Input的写法
1:defaultDom 直接利用vModel来双向绑定input的值
2:jsxDom 利用on:input 来进行双向绑定

如果在input 直接改变的时候 双向绑定是成功的
但是 当为每个input 添加了一个清空Input的Button之后
jsxDom的Button 执行了 jsxClear 如果值不改变可以清空值
但是如果操作步骤是
先改变 此Input的值 再点击清空按钮
这时候就无法清空input的内容了

请问这种情况是什么原因,如果要用 h()
应该怎么写才对?

关注 2 回答 1

_SYY_ 提出了问题 · 2020-08-19

vue-cli项目 eslint和prettier搭配 如何过滤掉某一些文件或者文件夹?

需求:
比如 引入了一个UI组件库
项目:
使用了eslint和eslint-config-prettier
如下图

"devDependencies": {
    "@dcloudio/types": "*",
    "@dcloudio/uni-automator": "^2.0.0-28620200814004",
    "@dcloudio/uni-cli-shared": "^2.0.0-28620200814004",
    "@dcloudio/uni-migration": "^2.0.0-28620200814004",
    "@dcloudio/uni-template-compiler": "^2.0.0-28620200814004",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-28620200814004",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.0-28620200814004",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-28620200814004",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.0-28620200814004",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.0-28620200814004",
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^4.5.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.11.0",
    "cross-env": "^7.0.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "jest": "^25.4.0",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "node-sass": "^4.14.1",
    "postcss-comment": "^2.0.0",
    "sass-loader": "^9.0.3",
    "uview-ui": "^1.6.2",
    "vue-template-compiler": "^2.6.11"
  }

文件结构如图所示
image

如图所示 uview-ui 为需要过滤文件

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  },
  globals: {
    uni: true
  }
};

.eslintignore

/src/uview-ui/
/src/uview-ui/*

.prettierignore

/src/uview-ui/*
/src/uview-ui/

需要过滤掉 src文件夹 下面的uview-ui文件夹中的所有内容
现在的问题是
已经能够正确在代码编辑时
屏蔽掉uview-ui文件夹中文件
停止eslint校对 以及 prettier 自动格式化
但是 当运行项目时
比如 npm run dev
image

这个警告报错 如何屏蔽掉呢?

目前尝试的可解决方法
在每个需要屏蔽的文件标题添加
/ eslint-disable /
但是文件太多了 有没有别的办法?

关注 1 回答 0

_SYY_ 提出了问题 · 2020-05-26

解决JS 如何写 正则替换 得到金额字符串

想要实现的效果为
例子:

var a = "1.001.001.001;//变为1.00
var b = "asdf8bdf.753";//变为8.75
var c = "0842.1.2.5";//变为842.12
var d = "08426544asdf0";//变为84265440

`
想要满足
1:替换掉非数字非小数点字符
2:小数点最多只有一个,其他小数点替换为空
3:小数点后只保留两位小数,并且不四舍五入

我的想法步骤是
1:先替换清除该字符串中非数字非小数点的
2:如果有超过一个小数点,替换掉空
3:如果有小数点,并且小数点后超过两位,替换为空

请教下这样的正则应该怎么写

关注 3 回答 3

_SYY_ 提出了问题 · 2019-12-10

解决vue在render中写jsx slot-scope内的值如何写?

`

<a-tree>
  <template slot="title" slot-scope="{title}">
    <span v-if="title.indexOf(searchValue) > -1">
      {{title.substr(0, title.indexOf(searchValue))}}
      <span style="color: #f50">{{searchValue}}</span>
      {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
    </span>
    <span v-else>{{title}}</span>
  </template>
</a-tree>

`
例如上面代码事例
由 a-tree组件往slot="title" 向上传了一个title
如果在jsx中 怎么写这个slot-scope
`

<a-tree><template slot="title"></template></a-tree>

`
这个slot-scope怎么写 才能获取到组件a-tree得到的title?

关注 2 回答 1

_SYY_ 赞了回答 · 2019-07-26

解决vue-cli3 如何全局引入less变量

我之前也遇到这个问题,你可能需要安装一个包就能使用变量
yarn add vue-cli-plugin-style-resources-loader

关注 7 回答 8

_SYY_ 赞了回答 · 2019-07-26

解决vue-cli3 如何全局引入less变量

我之前也遇到这个问题,你可能需要安装一个包就能使用变量
yarn add vue-cli-plugin-style-resources-loader

关注 7 回答 8

_SYY_ 赞了回答 · 2019-07-26

解决vue-cli3 如何全局引入less变量

我之前也遇到这个问题,你可能需要安装一个包就能使用变量
yarn add vue-cli-plugin-style-resources-loader

关注 7 回答 8

_SYY_ 赞了回答 · 2019-07-26

解决vue-cli3 如何全局引入less变量

我之前也遇到这个问题,你可能需要安装一个包就能使用变量
yarn add vue-cli-plugin-style-resources-loader

关注 7 回答 8

_SYY_ 提出了问题 · 2019-07-10

解决vue-cli3 如何全局引入less变量

当有一个可在全局使用的公共less变量文件
variable.less
如何写才能一次性在所有.vue文件中引入这个文件?

我尝试了几种方法
1:安装style-resources-loader
然后配置

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/style/variable.less")]
    }
  }
};

使用后 没有任何效果
测试了 ./src @/src ~@/src 依然没有任何效果

2:在main.js中引入variable.less

这样确实可以获取到variable.less中的样式 但是变量拿不到
提示:

Variable @BG is undefined

我设置的变量是 BG 提示找不到这个变量
图片描述
图片描述
图片描述

3:使用 下面 冯恒智 建议的方法
图片描述
图片描述
改写成less 结果无效
4:使用 globalVars
目前唯一成功的方法
图片描述

但是感觉这样需要每次去vue.config.js里面去维护 有点不方法 有没有更好的办法

不知道如何写才能引入less的公共变量文件,
想要的效果是 在所有.vue文件里面 不用重复写 引入公共变量less文件
如果有知道怎么做的,麻烦指点一下 谢谢

关注 7 回答 8

认证与成就

  • 获得 3 次点赞
  • 获得 22 枚徽章 获得 0 枚金徽章, 获得 5 枚银徽章, 获得 17 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-04-05
个人主页被 605 人浏览