vue仿制PHi静态页面--day02

DB_鸠

已于 2022-04-23 15:02:54 修改

阅读量1.4k

点赞数 1

分类专栏： vue.js 文章标签： vue.js 案例

于 2022-04-23 14:59:44 首次发布

本文链接：https://blog.csdn.net/m0_66711291/article/details/124363472

版权

vue.js 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

一个游戏的页面，没有任何有用的功能，只是练习vue语法用

最后一个月，马上要备战期末了，所以我要咕咕咕。

1、目标

写完设置页面，放一下成果图。

2、UI组件的修复

昨天封装的Ui组件，因为z-index的问题把整个页面都盖住了，导致我不能进行页面操作

找了好久都找不到问题所在，耽误了很长时间，以后可不敢瞎写z-index了

去除之后一切正常

3、整体布局

分为左右两部分

左半部分为三个拖动条，右半部分为设置的效果预览

采用斜切 + 移动的方式绘制出区域

4、Range的美化

默认的range是很细小的，需要css的样式设定

.input input[type=range]{
    height: 5vh;
    flex: 1;
  }

  .input input[type="range"]::-webkit-slider-runnable-track{
    width: 5vh;
    height: 5vh;
    background-color: black;
    border-left: 5px solid white;
    border-right: 5px solid white;
  }

  .input input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /*//这三个是去掉滑块原有的默认样式，划重点！！*/
    width: 5vh;
    height: 5vh;
    color: white;
  }

range样式

::-webkit-slider-container /*可以修改容器的若干样式*/
::-webkit-slider-runnable-track /*可以修改轨道的若干样式*/
::-webkit-slider-thumb /*可以修改滑块的若干样式*/

不知道为什么滑块的样式不生效，以后在研究吧。

5、v-model双向绑定


html部分
<input type="range" value="0" min="-600" max="600" step="5" v-model="transition">


script部分
data () {
      return {
        transition:0,
        scale:1,
        light:1,
      }
    },

6.watch

用于监听滑动条的变化，修改右侧的预览

watch: {
      transition(now,old){
        document.querySelector("#tap").style.top = - 90 / 3000 * now + 'vh';
      },
      scale(now,old){
        document.querySelector("#tap").style.width = 100 * now + 'px';
        document.querySelector("#tap").style.height = 10 * now + 'px';
      },
      light(now,old){
        document.querySelector('.box').style.filter = `brightness(${now})`
        console.log(document.querySelector('.box').style.filter);
      }

7.css滤镜

发现自己不会修改亮度，于是一查就发现了没见过的css属性——滤镜（filter）

《我在css学ps》

css滤镜
效果	英文	取值	说明
高斯模糊	blur	0~+	取值越大越模糊，不接受百分比
亮度	brightness	百分比	可以让图片看起来更亮或更暗，取值越大越亮
对比度	contrast	百分比	0%时图片为全黑
阴影	drop-shadow（x,y,b,c）	距离，高斯模糊，颜色	给图像设置一个合成在图像下面的阴影效果
去色	grayscale	百分比	100%完全变为灰色
色相旋转	hue-rotate	角度	给图像应用色相旋转，360为一个角度
反色	invert	百分比	100%表示完全反转，0%表示没变化
透明度	opacity	百分比	转化图像的透明程度。0%表示完全透明
饱和度	saturate	百分比	转换图像饱和度，0%表示完全不饱和
褐色	sepia	百分比	将图像转换为深褐,100%表示完全深褐色的