封装一个函数, 实现一个 rgba(12,34,56,0.5) 类型的颜色值
时间: 2024-05-24 20:10:12 浏览: 10
function rgbaColor(r, g, b, a) {
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
// 示例
const color = rgbaColor(12, 34, 56, 0.5);
console.log(color); // 输出 "rgba(12, 34, 56, 0.5)"
相关问题
用java语言写一个NV21转RGBA函数
public static void NV21toRGBA(byte[] nv21, int width, int height, int[] rgba) {
final int frameSize = width * height;
int[] yuv = new int[frameSize];
int[] u = new int[frameSize];
int[] v = new int[frameSize];
// Convert YUV to RGB
for (int i = 0; i < frameSize; i++) {
yuv[i] = nv21[i] & 0xff;
}
for (int i = 0; i < frameSize / 4; i++) {
v[i] = (nv21[frameSize + i * 2] & 0xff) - 128;
u[i] = (nv21[frameSize + i * 2 + 1] & 0xff) - 128;
}
int yp = 0;
for (int j = 0; j < height; j++) {
int uvp = frameSize + (j >> 1) * width, u = 0, v = 0;
for (int i = 0; i < width; i++) {
int y = (0xff & ((int) yuv[yp]));
if ((i & 1) == 0) {
v = (0xff & v[i >> 1]);
u = (0xff & u[i >> 1]);
}
int y1192 = 1192 * y;
int r = (y1192 + 1634 * v);
int g = (y1192 - 833 * v - 400 * u);
int b = (y1192 + 2066 * u);
if (r < 0) r = 0; else if (r > 262143) r = 262143;
if (g < 0) g = 0; else if (g > 262143) g = 262143;
if (b < 0) b = 0; else if (b > 262143) b = 262143;
rgba[yp++] = 0xff000000 | ((b << 6) & 0xff0000) | ((g >> 2) & 0xff00) | ((r >> 10) & 0xff);
}
}
}
vue封装一个弹出框 并且在页面调用 前端代码实现
好的,那我给您提供一个简单的Vue弹出框组件,您可以自行进行封装和修改:
1. 首先在Vue项目的src/components目录下创建一个MessageBox.vue文件,用于封装弹出框组件。
2. 在MessageBox.vue文件中定义组件模板和样式:
```
<template>
<div class="message-box" v-show="visible">
<div class="message-title">{{ title }}</div>
<div class="message-content">{{ content }}</div>
<div class="message-buttons">
<button @click="confirm">确认</button>
<button @click="cancel">取消</button>
</div>
</div>
</template>
<style>
.message-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.message-title {
font-size: 20px;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.message-content {
font-size: 16px;
padding: 20px;
}
.message-buttons {
text-align: center;
margin-top: 20px;
}
.message-buttons button {
margin-right: 10px;
padding: 5px 10px;
border: none;
border-radius: 3px;
background-color: #ccc;
color: #fff;
cursor: pointer;
}
.message-buttons button:hover {
background-color: #333;
}
</style>
```
在组件中,我们定义了一个div元素,用于显示弹出框,以及一些样式属性。
3. 在MessageBox.vue文件中定义组件的props和methods:
```
<script>
export default {
name: 'MessageBox',
props: {
title: {
type: String,
default: '提示'
},
content: {
type: String,
default: ''
}
},
data() {
return {
visible: true
}
},
methods: {
confirm() {
this.$emit('confirm')
this.visible = false
},
cancel() {
this.$emit('cancel')
this.visible = false
}
}
}
</script>
```
在props中定义了组件的title和content属性,默认值为'提示'和''。在data中定义了visible属性,用于控制弹出框的显示和隐藏。在methods中定义了confirm和cancel方法,用于响应用户点击弹出框上的确认和取消按钮,并通过$emit方法向父组件传递事件。
4. 在需要使用弹出框的页面中,引入MessageBox组件,并在模板中使用:
```
<template>
<div>
<button @click="showMessage">显示弹出框</button>
<message-box v-if="show" title="提示" :content="message" @confirm="confirm" @cancel="cancel"></message-box>
</div>
</template>
<script>
import MessageBox from '@/components/MessageBox'
export default {
components: {
MessageBox
},
data() {
return {
show: false,
message: ''
}
},
methods: {
showMessage() {
this.show = true
this.message = '确定要删除这个文件吗?'
},
confirm() {
console.log('确认删除文件')
},
cancel() {
console.log('取消删除文件')
}
}
}
</script>
```
在模板中,我们定义了一个按钮,用于触发弹出框的显示。当用户点击按钮时,show属性会被设置为true,弹出框就会显示出来。同时,我们还将MessageBox组件作为子组件引入,通过props传递参数和事件。当用户点击弹出框上的确认和取消按钮时,confirm和cancel方法会被执行。
希望这个例子可以帮到您。