• 最新文章
  • linux
  • php
  • sql
  • 服务端
  • tool
  • cocos

cocoscreator给sprite图片置灰

这段代码演示了如何获取并应用引擎内置的2d-gray-sprite材质到cc.Sprite组件上，通过cc.Material.getBuiltinMaterial方法得到材质，并用setMaterial函数设置到节点的精灵组件中。 //-- 使用引擎自带材质 let mm = cc.Material.getBuiltinMaterial("2d-gray-sprite") node.getComponent(cc.Sprite).setMaterial(0, mm) //1.将图片置灰： sprite_icon.setMaterial(0, cc.Material.createWithBuiltin(cc.Material.BUILTIN_NAME.GRAY_SPRITE, 0)); //2.将置灰图片还原： sprite_icon.setMaterial(0, cc.Material.createWithBuiltin(cc.Material.BUILTIN_NAME.SPRITE, 0));

beego开启CORS

问题 要在Beego中开启CORS，需要使用插件cors，并针对不同的路由类型进行设置。 示例 普通路由 beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{ AllowOrigins: string{"*"}, //AllowMethods: string{"POST", "GET", "OPTIONS"}, //AllowHeaders: string{"Origin"}, //ExposeHeaders: string{"Content-Length"}, //AllowCredentials: true, })) 静态文件路由 beego.InsertFilter("*", beego.BeforeStatic, cors.Allow(&cors.Options{ AllowOrigins: string{"*"}, //AllowMethods: string{"POST", "GET", "OPTIONS"}, //AllowHeaders: string{"Origin"}, //ExposeHeaders: string{"Content-Length"}, //AllowCredentials: true, }))

div内元素居中

在HTML和CSS中，将div元素内容居中可以通过多种方式实现，具体方法取决于你想如何居中：居中其内部的文本、图片、或其他子元素，还是整个div元素在页面上居中。以下是一些常见的方法： 文本居中 如果你想要让div内的文本居中，可以使用text-align属性： <div style="text-align: center;"> 这是一段居中的文本。 </div> 子元素（如图片或内联元素）居中 对于子元素（如图片或内联元素），可以使用text-align: center;在div上实现居中，或者在父div中使用display: flex; justify-content: center; align-items: center;： <!-- 使用 text-align --> <div style="text-align: center;"> <img src="image.jpg" alt="示例图片"> </div> <!-- 使用 Flexbox --> <div style="display: flex; justify-content: center; align-items: center;"> <img src="image.jpg" alt="示例图片"> </div> 整个div元素在页面上居中 方法一：使用Flexbox ‌确定元素的布局方式‌：使用 Flexbox 布局。 ‌为 div 设置适当的 CSS 属性‌：使用 justify-content 和 align-items 属性来实现居中。 <div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <!-- 内容 --> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Centering</title> <style> .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 使容器高度为视口高度，以便观察居中效果 */ border: 1px solid #000; /* 边框用于可视化容器 */ } .content { /* 子元素的样式，可根据需要调整 */ padding: 20px; background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="content">我是居中的元素</div> </div> </body> </html> 方法二：使用Grid ‌确定元素的布局方式‌：使用 Grid 布局。 ‌为 div 设置适当的 CSS 属性‌：使用 place-items 属性（它是 justify-items 和 align-items 的简写）来实现居中。 ```html <div style="display: grid; place-items: center; height: 100vh;"> <!-- 内容 --> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid Centering</title> <style> .container { display: grid; place-items: center; /* 同时实现水平和垂直居中 */ height: 100vh; /* 使容器高度为视口高度，以便观察居中效果 */ border: 1px solid #000; /* 边框用于可视化容器 */ } .content { /* 子元素的样式，可根据需要调整 */ padding: 20px;

vue读取全局配置

创建全局配置文件public/static/config.js window.config = { androidUrl:"https://Android-arm64.apk", googleplayUrl:"#", appsoreUrl:"#", windowsUrl:"#", macUrl:"#", } 在index.html中引入js <head> <script type="module" src="/static/config.js"></script> </head> 在需要的vue中可以直接使用 <script setup> import { ref } from 'vue'; let downUrls = ref(window.config) console.log(downUrls.androidUrl); </script> <div class="download-icon"> <a :href="`${downUrls.appsoreUrl}`" > <img src="../../assets/images/down_appstore.svg" alt=""> </a> <a :href="`${downUrls.googleplayUrl}`" > <img src="../../assets/images/down_googleplay.svg" alt=""> </a> <a :href="`${downUrls.androidUrl}`" > <img src="../../assets/images/down_android.svg" alt=""> </a> <a :href="`${downUrls.windowsUrl}`" > <img src="../../assets/images/down_windows.svg" alt=""> </a> <a :href="`${downUrls.macUrl}`" > <img src="../../assets/images/down_mac.svg" alt=""> </a> </div> 或 <div class="footer-right"> <ul> <li v-for="(v, i) in footerlist" :key="i"> <p>{{ v.title }}</p> <div v-for="(item, j) in v.list" :key="j" @click="clickFoot(i,j)">{{ item.label }}</div> </li> </ul> </div> export default { setup() { const footerlist = ref( }, }, methods: { scrollToElement(refID) { // this.$nextTick(() => { // const element = document.getElementById("service"); // console.log(element); // this.$refs.service.$el.scrollIntoView({ behavior: 'smooth' }); // }); let time=setTimeout(()=>{ this.$nextTick(()=>{ let top=0; let targetElement=document.getElementById(refID); if(targetElement){ // 获取元素距离顶部的距离 top=targetElement.offsetTop; } if(top>0){ // 滚动到指定位置 window.scrollTo({ top: top, behavior: 'smooth' }); } clearTimeout(time); time=null; }) },300); }, clickFoot(i,j) { let clickData = this.footerlist.list; //type,1:打开新的连接，2:跳转到页内指定位置，3:跳转网站内路由页面 switch(clickData.type){ case 1: if( clickData.data && clickData.data != "" ){ window.open(clickData.data, '_blank'); } break; case 2: this.scrollToElement(clickData.data); break; case 3: this.$router.push(clickData.data); window.scrollTo(0, 0);

vue判断移动端和pc端 加载css

在main.js中可以判断后加引入相应的css // 判断设备是移动端还是pc端 const deviceType = () => { return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); }; // 判断是否是移动端 if (deviceType()) { import("@/assets/css/mobile.css"); // 移动端样式文件 }else{ import("@/assets/css/index.css"); // pc端样式文件 } 在Vue中，你可以使用客户端检测来决定加载哪个CSS文件。这里有一个简单的方法来根据设备类型加载不同的CSS文件： 使用v-bind来根据条件切换标签的href属性。 使用window.matchMedia来检测设备类型。 <template> <div> <!-- 移动端样式 --> <link v-if="isMobile" rel="stylesheet" href="mobile.css"> <!-- PC端样式 --> <link v-else rel="stylesheet" href="pc.css"> </div> </template> <script> export default { data() { return { isMobile: this.checkIsMobile() }; }, methods: { checkIsMobile() { const mediaQuery = window.matchMedia("(max-width: 768px)"); if (mediaQuery.matches) { return true; } else { return false; } } } }; </script> 在Vue项目中判断移动端和PC端，可以通过多种方法实现。以下是几种常见的方法，以及如何使用这些方法来判断设备类型： 1. 使用navigator.userAgent字符串检测 这是最简单且常用的方法，通过检查浏览器的navigator.userAgent字符串来判断设备类型。 methods: { isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); return flag; } } 在组件的mounted钩子或任何需要判断设备类型的地方调用这个方法： mounted() { if (this.isMobile()) { console.log("移动端设备"); // 移动端逻辑 } else { console.log("PC端设备"); // PC端逻辑 } } 使用第三方库（如vue-device-detector） 为了更方便和准确地检测设备类型，可以使用第三方库，如vue-device-detector。 首先，安装vue-device-detector库： npm install vue-device-detector --save 然后，在Vue项目中引入并使用它： import Vue from 'vue'; import VueDeviceDetector from 'vue-device-detector'; Vue.use(VueDeviceDetector); 在组件中使用VueDeviceDetector提供的属性和方法来检测设备类型： export default { data() { return { device: this.$device, }; }, mounted() { if (this.device.isMobile()) { console.log("移动端设备"); // 移动端逻辑 } else { console.log("PC端设备"); // PC端逻辑 } }, }; 3. 使用媒体查询（window.matchMedia） 虽然这种方法不是直接检测设备类型，但它可以根据设备的视口宽度来判断是否是移动设备。这种方法更适用于响应式设计，而不是设备类型的判断。 mounted() { const isMobile = window.matchMedia("(max-width: 768px)").matches; if (isMobile) { console.log("可能是移动端设备"); // 移动端逻辑 } else { console.log("可能是PC端设备"); // PC端逻辑 } } 4. 在路由守卫中判断设备类型 如果需要根据设备类型重定向到不同的页面，可以在Vue Router的路由守卫中进行判断： router.beforeEach((to, from, next) => { if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {

怎么在div中设置鼠标滑过变超链接

要在div中设置鼠标滑过时变成超链接，可以通过 CSS为div添加:hover伪类选择器，并使用cursor: pointer; 使得鼠标指针在滑过时变成手指形状。然后，可以使用text-decoration: underline;为文本添加下划线，表示它是可点击的。当然，实际上这只是一个div，要变成真正的超链接，你需要添加点击事件处理器，使用JavaScript来处理点击后的行为（通常是导航到另一个页面）。 以下是实现这一功能的示例代码： HTML: <div class="link" id="myLink">这是一个可点击的div</div> .link { cursor: pointer; text-decoration: underline; color: blue; } .link:hover { color: red; } document.getElementById('myLink').onclick = function() { window.location.href = 'https://www.example.com'; }; 当用户将鼠标悬停在div上时，文本颜色会变成红色，并且在点击时会导航到'https://www.example.com'。

动态修改div 自定义标签值

在HTML中，自定义标签的值通常存储在标签的属性中。如果你想动态地修改这些自定义属性的值，你可以使用JavaScript来实现。 以下是一个简单的例子，展示了如何使用JavaScript动态修改div元素的自定义属性值： HTML: <div id="myDiv" data-custom="initialValue">这是一个div</div> <button onclick="changeCustomValue()">修改自定义标签值</button> function changeCustomValue() { var div = document.getElementById('myDiv'); div.dataset.custom = 'newValue'; // 修改自定义属性值 } 在这个例子中，我们有一个带有自定义data-custom属性的div元素。当用户点击按钮时，changeCustomValue函数会被调用，这个函数会获取div元素，并将其data-custom属性的值修改为newValue。 注意，dataset属性允许你以属性访问形式操作自定义数据属性。例如，div.dataset.custom访问data-custom属性的值，而div.dataset.custom = 'newValue'则设置新的值。

Vue.js中全局替换字体及font-family 自定义字体

全局字体替换 添加自定义字体 首先，你需要将自定义字体文件（如.ttf, .woff, .woff2等格式）添加到项目的静态资源目录，通常是src/assets下。 链接字体文件 接下来，在项目的主入口文件（通常是src/main.js）或者在public/index.html头部添加CSS链接，以加载字体文件。如果是在Vue CLI项目中，你可能需要在public目录下的index.html中添加： <link rel="stylesheet" href="<path-to-your-fonts-css>"> 或 import '@/assets/css/index.css' 这里的应该指向你创建的CSS文件，该文件包含了字体的@font-face规则。 编写@font-face规则 在你的CSS文件中，编写@font-face规则来定义自定义字体： @font-face { font-family: 'YourFontName'; src: url('<path-to-your-font-file>.woff2') format('woff2'), url('<path-to-your-font-file>.woff') format('woff'); font-weight: normal; font-style: normal; } 确保路径正确指向字体文件。 如： @font-face { font-family: 'NotoSans-SC'; /* 定义一个新的字体名称 */ src: url('/src/assets/font/NotoSans-SC.ttf'); /* 指定字体文件的URL和格式 */ font-weight: normal; /* 设置字体的粗细 */ font-style: normal; /* 设置字体的样式（如斜体） */ } 设置全局font-family 在Vue项目中，你可以通过在src/App.vue或全局样式文件（如src/styles/global.css）中设置font-family属性来全局应用自定义字体： body { font-family: 'YourFontName', sans-serif; } 这样，整个应用将使用YourFontName字体，如果该字体不可用，则回退到默认的无衬线字体。 使用自定义字体图标 引入字体图标库 对于字体图标，如Font Awesome或Iconfont，你同样需要将图标库的字体文件添加到项目中，并在CSS中定义使用规则。 在组件中使用字体图标 在Vue组件中使用字体图标时，可以像使用普通HTML元素一样使用标签，并添加相应的类名： <i class="fa fa-windows"></i> 确保你的CSS中包含了对字体图标的定义，如： .fa-windows:before { content: "\f1eb"; } 其中\f1eb是该图标在字体库中的Unicode字符编码。 字体格式比较 OTF (OpenType Font)： 特点：支持高级排版特性，如连字、替代字符。 优点：兼容性好，适用于复杂排版需求。 选择原因：适合需要高质量排版的项目。 TTF (TrueType Font)： 特点：广泛使用，支持大多数操作系统。 优点：良好的可读性，适合屏幕显示。 缺点：文件相对较大，不支持部分高级排版特性。 WOFF/WOFF2 (Web Open Font Format)： 特点：专为网页设计，基于压缩的 TTF/OTF。 优点：文件小，加载快，支持现代浏览器。 缺点：不兼容较旧的浏览器。 EOT (Embedded OpenType)： 特点：微软开发，主要用于旧版 IE 浏览器。 优点：支持 IE 浏览器。 缺点：逐渐被淘汰，不支持其他浏览器。

html 跳转到页面指定位置

创建目标组件并添加目标元素 假设我们想在 About.vue 组件中滚动到某个特定的位置。我们可以在 About.vue 中添加一个具有唯一 id属性的元素 <div id="service" class="service"> <div class="service-text" > <div class="service-text1">24H在线</div> <div class="service-text2">真人客服，永不失联</div> <div class="service-text3">我们的真人客服7x24小时在线，随时响应您的需求。无论问题大小，迅速解决，确保您的使用体验无忧，永不失联。</div> </div> </div> 添加滚动到指定位置的代码 <script> export default { methods: { scrollToElement(refID) { let time=setTimeout(()=>{ this.$nextTick(()=>{ let top=0; let targetElement=document.getElementById(refID); if(targetElement){ // 获取元素距离顶部的距离 top=targetElement.offsetTop; } if(top>0){ // 滚动到指定位置 window.scrollTo({ top: top, behavior: 'smooth' }); } clearTimeout(time); time=null; }) },300); }, } } </script> 最后，在你的 Home.vue 或其他组件中触发路由导航： <li><a href="javascript:void(0)" @click="scrollToElement('service')">联系我们</a></li>

Vue 图片打包之后访问路径错误问题的解决 vite中动态加载图片路径

如果图片资源不是来自于服务器，而是本地资源，那么就会遇到动态加载图片的问题。 在vue项目中，v-for显示的图片，导出时发现图片路径不对 在vue项目中，构建工具使用webpack，想要动态加载图片路径，只要用require()即可，但是如果工具是基于vite的话，vite是直接根据ES Modules的，它是没有require的，那怎么办呢？ <template v-for="(item, index) in tabbarData" :key="index"> <div class="tab-bar-item"> <img :src="require(item.image)"> <div class="text">{{ item.text }}</div> </div> </template> 这个时候需要用到new URL()，它会返回一个url对象，这个对象中有href属性，包含完整的URL。 <div class="price-feature-item" v-for="(v,i) in priceFeatureList" :key="i" > <div class="price-feature-item-content"> <div class="price-feature-item-img"> <img :src="getAssetsImg(`${v.img}`)" /> </div> <div>{{v.desc}}</div> </div> </div> 具体的URL详情可以查阅mdn文档，这里只解释一下怎么解决动态图片问题。 URL - Web API 接口参考 | MDN New URL（）：这里是传两个参数，参数一是相对路径（相对于当前文件），也就是我们要动态加载的图片的路径；参数二传的是当前文件的地址，使用import.meta.url获取。 简单来说就是根据第二个参数的当前文件路径来找到第一个参数的相对文件路径。 为了方便使用，封装到工具函数中，记得注意一下相对路径的改变： export const getAssetsImg = (image) => { return new URL(`../assets/img/${image}`,import.meta.url).href } 在外部引入即可 import { getAssetsImg } from '../../utils/load_assets';